如何将vue项目打包成exe程序

1.clone打包项目模板，我用的是electron-quick-start(目录中不可以有中文路径，否则打包会报错) gitHub地址

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

2.将vue项目打包成html,js,css

npm run build

3.打包后的文件夹方至electron-quick-start项目下

4.将electron-quick-start项目中的main的入口文件改为对应路径

// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html')

5.安装打包exe插件

cnpm install electron electron-builder -D

6.设置打包下载插件地址为淘宝镜像地址

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
npm config set ELECTRON-BUILDER-BINARIES_MIRROR https://npm.taobao.org/mirrors/electron-builder-binaries/

7.在electron-quick-start项目中的package.json文件中配置打包命令

"scripts": {
    "start": "electron .", // 启动项目
	"build": "electron-builder" // 打包项目成exe程序
},
"build": {
	"appId": "com.wss.app",
	"directories": {
		"output": "builder"
	},
	"win": {
		"target": [
			"nsis",
			"zip"
		]
	},
	"files": [
		"dist/**/*",
		"main.js"
	]
},

8.预览程序或打包

npm run start // 预览
npm run build // 打包

期间遇到的问题

报错：Processing script file: "" (ACP)

原因：项目路径中包含了中文

解决：将项目clone在没有中文的路径中

报错：Error: Cannot find module 'fs/promises'

原因：node的版本过低

解决：安装更高版本的node，至少要14.0.0

报错：Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.

原因：electron-builder不能装在dependencies环境中，应该装在devDependencies开发中使用

解决：安装electron-builder加上-D

打包后接口变成了file://导致调用接口失败

原因：因为electron中设置了win.loadURL访问了本地index.html文件导致

解决：参考https://www.toutiao.com/i6882908100496458248/?wid=1640743010603