VUE3项目打包成exe

### 将Vue3项目打包为可执行文件（exe）的方法 将Vue3项目打包为可执行文件（exe）通常需要结合Electron工具来实现。以下内容详细介绍了如何完成这一过程，并结合了相关引用中的关键信息[^1]。 #### 1. Vue3项目的构建 在使用Electron之前，必须先对Vue3项目进行构建，生成`dist`目录。确保Vue3项目的`vue.config.js`中正确配置了`publicPath`，以便生成的静态资源能够被Electron正确加载。如果未设置`publicPath`，可能会导致Electron运行时显示空白页面[^3]。 ```javascript module.exports = { publicPath: './', }; ``` #### 2. 创建Electron项目 在Vue3项目的根目录下初始化一个新的Electron项目。将构建后的`dist`目录放置到Electron项目的根目录下[^1]。 #### 3. 修改`package.json` 在Electron项目的`package.json`中添加必要的脚本命令，用于打包和启动应用。以下是一个示例配置： ```json { "name": "vite-app", "version": "1.0.0", "main": "background.js", "scripts": { "start": "electron .", "packager": "electron-packager ./ ViteApp --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite" }, "devDependencies": { "electron": "^25.0.0", "electron-packager": "^16.1.0" } } ``` - `start`：用于启动Electron应用。 - `packager`：用于打包生成`.exe`文件。可以通过`--platform`指定目标平台（如`win32`），通过`--arch`指定架构（如`x64`），并通过`--icon`指定图标文件[^2]。 #### 4. 配置Electron主进程文件 创建或修改Electron的主进程文件`background.js`，确保其正确加载Vue3项目的`index.html`文件。例如： ```javascript const { app, BrowserWindow } = require('electron'); let win; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadFile('dist/index.html'); // 加载Vue3项目的index.html win.setMenu(null); // 去掉窗口菜单栏[^5] win.on('closed', () => { win = null; }); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } }); ``` #### 5. 打包并生成`.exe`文件 在Electron项目的根目录下运行以下命令以打包项目： ```bash npm run packager ``` 成功打包后，生成的`.exe`文件将位于`release`文件夹中。 --- ###