vue打包exe

### 将 Vue 项目打包为 EXE 文件的完整流程 #### 1. 安装 Electron 和相关依赖 为了将 Vue 项目转换为桌面应用程序并最终打包为 `.exe` 文件，首先需要安装 `electron` 及其必要的插件。可以通过以下命令完成安装： ```bash npm install electron --save-dev ``` 如果希望简化构建过程，可以考虑使用社区维护的脚手架工具，例如 `vue-cli-plugin-electron-builder`。 ```bash vue add electron-builder ``` 这一步会自动配置大部分基础环境，并提供开箱即用的功能[^1]。 --- #### 2. 配置 Electron 主进程文件 在项目的根目录下创建一个名为 `main.js` 的文件作为 Electron 应用程序的入口点。以下是基本的主进程代码结构： ```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`); } app.whenReady().then(() => { createWindow(); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ``` 此部分定义了窗口的基本属性以及加载 Vue 前端页面的方式[^2]。 --- #### 3. 修改 `package.json` 为了让 Electron 正确识别主进程文件和其他配置项，在 `package.json` 中添加如下字段： ```json { "name": "your-app-name", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-packager . your-app-name --platform=win32 --arch=x64 --out=out" } } ``` 上述配置中： - `"main"` 字段指定了主进程文件路径； - `"start"` 脚本用于本地调试运行； - `"build"` 脚本负责生成 Windows 平台下的可执行文件[^5]。 --- #### 4. 构建 Vue 项目 在打包之前，需先编译 Vue 项目以生成静态资源文件。通常情况下，这些文件会被放置于 `dist/` 目录下。执行以下命令完成前端构建： ```bash npm run build ``` 完成后，确保生成的 HTML 文件能够被 Electron 加载。如果没有特殊需求，默认路径应位于 `./dist/index.html` 下[^4]。 --- #### 5. 打包为 EXE 文件 借助 `electron-packager` 工具，可以直接将整个项目压缩成独立的应用程序。运行以下命令启动打包操作： ```bash npm run build ``` 该命令会在指定输出目录（如 `out/`）内生成目标平台对应的可执行文件。对于 Windows 用户而言，则是一个标准的 `.exe` 文件。 > **注意**：可以根据实际场景调整参数选项，比如更改图标 (`--icon`) 或支持多架构版本 (`--arch=all`) 等。 --- ### 示例总结 通过以上步骤，已经实现了从 Vue 开发到桌面应用发布的全过程。具体来说，利用了 Electron 提供的强大跨平台能力，配合简单的 CLI 操作完成了复杂度较高的任务。 ```python print("Vue Desktop App Built Successfully!") ``` ---