electron打包vue3项目

### 使用 Electron 打包 Vue 项目 #### 准备工作 确保已经创建了一个基于 Vue 的 Web 应用程序，并且该应用程序能够正常运行。可以通过 `npm run serve` 或者类似的命令启动开发服务器来验证这一点[^3]。 #### 集成 Electron 到 Vue 项目中 一种方法是在现有的 Vue CLI 创建的应用基础上增加对 Electron 支持的功能插件，通过执行如下命令实现： ```bash vue add electron-builder ``` 这会自动配置好必要的构建脚本以及依赖项，允许开发者选择合适的 Electron 版本来适配应用需求[^2]。 #### 修改路由模式 对于某些场景来说，默认的历史模式(`mode: 'history'`)可能不适合被打包后的桌面环境；因此建议改为哈希模式(`mode: 'hash'`)以避免潜在的问题。具体操作可以在 Vue Router 的配置文件里完成: ```javascript const router = new VueRouter({ mode: 'hash', // 将路由模式更改为 hash routes: [...] }) ``` 此外，在打包过程中还需要注意处理存储机制的变化。因为当应用程序被编译为独立的 .exe 文件时，浏览器内建的一些特性如 Cookies 可能无法按预期工作。所以应该考虑将所有的 Cookie 访问替换成 localStorage 来保存数据[^4]: - 替换所有调用 `Cookies.get()` 的地方为 `localStorage.getItem()` - 替换所有调用 `Cookies.set()` 的地方为 `localStorage.setItem()` - 替换所有调用 `Cookies.remove()` 的地方为 `localStorage.removeItem()` #### 构建与发布 一旦完成了上述调整之后就可以准备进行最终的产品化过程了——即把整个工程构建成适合分发给用户的格式。通常情况下这意味着要生成适用于目标平台的操作系统二进制文件(.exe, .dmg等)，此时可以利用像 `electron-packager` 这样的工具来进行实际的打包动作。首先需要安装此工具作为开发阶段使用的依赖库： ```bash npm install electron-packager --save-dev ``` 最后一步则是定义具体的打包指令并将其加入 package.json 中以便于后续自动化部署流程中的调用。例如下面是一个简单的例子说明如何针对 Windows 平台制作可执行文件： ```json { "scripts": { ... "package-win": "electron-packager ./ --platform=win32 --arch=x64" } } ``` 这样便可以根据实际情况灵活定制不同操作系统上的发行版本了[^1]。