如何将vue项目打包成exe

### 如何将 Vue 项目打包成可执行文件（EXE） #### 配置 Electron 主进程 为了实现 Vue 和 Electron 的集成，需要在项目的根目录下创建 `electron/main.js` 文件作为主进程入口。该文件负责管理窗口实例以及与渲染进程通信的功能。 ```javascript const { app, BrowserWindow } = require('electron'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); mainWindow.loadURL(`file://${__dirname}/../dist/index.html`); mainWindow.on('closed', () => (mainWindow = null)); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (!mainWindow) { createWindow(); } }); ``` 此部分代码定义了一个基本的 Electron 应用程序结构[^1]。 --- #### 修改 `package.json` 中的脚本命令 为了让项目能够正常运行并支持打包操作，在 `package.json` 中添加必要的脚本命令： ```json { "name": "your-app-name", "version": "1.0.0", "main": "./electron/main.js", "scripts": { "start": "electron .", "packager": "electron-packager ./ YourAppName --platform=win32 --arch=x64 --overwrite --out=./builds/", "electron:build": "electron-builder" }, "dependencies": { "electron": "^27.0.0" }, "devDependencies": { "electron-builder": "^24.0.0" } } ``` 上述配置中包含了用于开发调试 (`start`)、单次打包 (`packager`) 及生产环境下的构建 (`electron:build`) 脚本[^4]。 --- #### 构建 Vue 前端项目 在完成 Electron 的基础配置之后，还需要先对 Vue 项目本身进行编译处理。通过运行以下命令可以生成静态资源文件到指定路径： ```bash npm run build ``` 这一步会把 Vue SPA 输出至默认位置 `/dist/` 下面，其中包含 HTML/CSS/JS 等必要组件[^3]。 --- #### 执行打包流程 当所有前置工作完成后，就可以正式进入最终阶段——即制作独立的应用程序包。具体方法如下所示： - **方式一**：利用简单的 `electron-packager` ```bash npm run packager ``` 此指令会在当前目录内的 `./builds/AppName-win32-x64` 子文件夹内生成目标 EXE 文件及其依赖项集合。 - **方式二**：借助更强大的 `electron-builder` 如果希望获得更加灵活可控的结果，则推荐采用第二种手段。它允许自定义安装向导界面样式甚至嵌入第三方插件扩展功能集。 ```bash npm run electron:build ``` 成功后将会看到新产生的 `dists` 目录，里面存放着可供分发使用的安装程序版本。 --- ### 注意事项 如果计划结合 Python 后端逻辑共同部署的话，请额外注意两者间的数据交换机制设计合理有效；同时也要考虑到跨平台兼容性问题可能带来的影响因素[^2]。 ---