打包vue成exe

### 打包Vue.js项目为Windows可执行的exe文件 将Vue.js项目打包成Windows可执行的exe文件，可以通过结合Electron框架实现。以下是详细的步骤说明： 1. **获取Electron官方示例项目** 首先从GitHub上克隆Electron的官方示例项目，并安装依赖以确保项目可以正常运行： ```bash git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm run start ``` 这一步完成后，Electron示例项目就可以正常运行了[^1]。 2. **修改Vue项目的配置** 在自己的Vue项目中，需要修改`vue.config.js`文件，将`publicPath`设置为`'./'`，以避免打包后的页面出现白屏问题： ```javascript module.exports = { publicPath: './', } ``` 完成配置后，使用以下命令对Vue项目进行打包： ```bash npm run build ``` 3. **将Vue项目打包结果集成到Electron项目中** 将Vue项目打包生成的`dist`文件夹复制到之前克隆的`electron-quick-start`项目根目录下，使其与`node_modules`文件夹处于同一级目录[^1]。 4. **删除Electron项目中的默认HTML文件** 删除`electron-quick-start`项目根目录下的`index.html`文件，以便后续替换为Vue项目的`index.html`文件[^2]。 5. **修改Electron项目的入口文件** 打开`electron-quick-start`项目中的`main.js`文件，将加载的HTML文件路径修改为Vue项目打包后的`index.html`文件路径： ```javascript // 修改前 mainWindow.loadFile('index.html') // 修改后 mainWindow.loadFile('./dist/index.html') ``` 这一步非常重要，确保Electron能够正确加载Vue项目的打包结果[^2]。 6. **安装打包工具并配置打包命令** 在`electron-quick-start`项目中安装`electron-packager`作为开发依赖： ```bash npm install electron-packager --save-dev ``` 接下来，在`package.json`文件的`scripts`部分添加一个用于打包的命令： ```json "scripts": { "start": "electron .", "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite" } ``` 7. **执行打包命令** 使用以下命令启动打包过程： ```bash npm run packager ``` 成功完成后，项目目录中会出现一个名为`App-win32-x64`的文件夹，其中包含了一个名为`App.exe`的可执行文件。双击该文件即可运行打包好的桌面应用。 通过以上步骤，可以将Vue.js项目顺利打包为Windows平台上的可执行exe文件，并且能够在没有网络环境的情况下独立运行。 ---