本文详细介绍将Vue项目打包为Windows可执行文件（exe）的完整步骤。核心思路是利用Electron作为容器，将Vue构建后的dist目录嵌入其中。关键操作包括修改vue.config.js的publicPath为./以防止白屏，配置main.js加载本地HTML，以及使用electron-packager生成最终安装包。
Vue项目打包为Windows桌面exe应用的完整流程
将Vue应用封装为Windows可执行文件
实现思路与核心原理
核心逻辑概述：
获取Electron官方示例代码，将其中默认的index.html替换为Vue项目构建生成的dist目录下的index.html，随后执行打包指令生成exe。
环境准备与项目初始化
第一步：克隆Electron官方demo并安装依赖，运行成功后即可忽略该demo，转而配置Vue项目。
git clone https://github.com/electron/electron-quick-start
npm i
npm run start
Vue项目构建配置优化
第二步：调整Vue项目的vue.config.js配置，将publicPath设置为./，否则打包后的页面可能出现白屏或资源加载失败。
module.exports = {
publicPath: './',
}
资源文件整合与目录结构
第三步：执行Vue项目打包命令，将生成的dist文件夹复制至之前克隆的electron-quick-start目录中，确保其与node_modules处于同一层级。
npm run build
此后Vue项目不再需要操作，后续步骤均基于electron-quick-start项目完成。
Electron依赖安装与入口配置
第四步：在electron-quick-start项目中安装打包工具依赖electron-packager。
npm install electron-packager --save-dev
第五步：进入electron-quick-start项目根目录，删除原有的index.html文件。
第六步：定位electron-quick-start项目的入口文件main.js，修改loadFile路径指向新的index.html（此替换至关重要，通常涉及第16行左右）。
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')*
打包指令配置与执行
第七步：在electron-quick-start项目的package.json文件中，于scripts节点下添加packager构建指令，配置如下：
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}
生成结果验证与应用启动
第八步：执行打包命令，项目根目录将生成App-win32-x64文件夹，内含App.exe启动文件，即为最终的桌面应用。
npm run packager 第九步：打包完成后，进入App-win32-x64目录，双击运行App.exe即可启动应用。
第十步：操作完成，部署成功。
总结与后续支持
总结
本文介绍了Vue项目打包为exe的完整流程，更多相关技术内容请参阅本站往期文章或继续浏览后续章节，感谢支持。