Vue项目打包为Windows桌面exe应用的完整流程

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的完整流程，更多相关技术内容请参阅本站往期文章或继续浏览后续章节，感谢支持。