vue项目打包成exe文件

1. 获取electron-quick-start demo

git clone https://github.com/electron/electron-quick-start

2. 安装依赖包

npm install 或 npm i
// 安装依赖时可能会遇到node版本的问题，需要切换node版本的可以先看下nvm，简单易操作

3. 打包项目（需要打包成exe的项目打包成dist）

将原项目进行打包： npm run build （具体命令需要根据项目package.json文件执行）
打包完直接将dist文件夹复制到electron-quick-start根路径

注意：一定要将node的npm安装镜像源设置成淘宝镜像，否则会遇到npm下载不成功的问题。

4. 配置electron-quick-start

• 修改main.js文件

mainWindow.loadFile('index.html')   // 原文件
mainWindow.loadFile('./dist/index.html') // 指定dist内部的index.html文件

注意： 当前配置运行打包命令之后无法获取到index.html内引入的静态资源文件，需要手动修改index.html内引入的静态文件路径，设置为相对路径

• 安装依赖electron-packager、electron

npm i electron-packager --save-dev   或  npm i electron-packager -D
npm i electron --save-dev    或    npm i electron -D // 安装不成功时可能是因为镜像源的问题
// 如果本地全局的镜像源已经是淘宝镜像，只需执行第二条命令
npm config set registry https://registry.npm.taobao.org/  
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

• 修改package.json文件

"scripts": {"start": "electron .","packager": "electron-packager ./ Vite App --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"},<!-- Vite App：指定生成exe名称，可自定义icon： 指定应用图标路径，可选
-->

6. 执行打包命令

npm run packager

原文链接