注意：我使用的是node版本16.20.1，因为electron-builder插件仅支持到node17、不支持node18，而node16是LTS版本，所以我选择16
1、初始化vue项目
npm install -g vue
vue create 项目名称
cd 项目目录我尝试了用脚手架初始化方式：npm create vue@latest
最后启动有问题，所以先用简单初始化
2、添加vue-cli-plugin-electron-builder插件
vue add electron-builder
Choose Electron Version
选择13.0.03、安装完了，运行一下试试
npm run electron:serve运行问题1：
Launching Electron时，可能会报Failed to fetch extension, trying 4 more times的错误
可以禁用Vue Devtools，编辑src\background.js，注释掉installExtension(VUEJS3_DEVTOOLS)
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
//注释掉这行
// await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})4、安装其他插件
第一步的vue create只是初始化一个基本项目框架，如果还需要安装其他核心插件（比如vue-router），可以通过vue控制台导入当前项目后安装
vue ui
导入--》选择项目文件夹--》导入这个文件夹--》左侧菜单/插件--》右上角/添加插件--》查找插件@vue/cli-plugin-router--》点击官方插件那行--》右下角/安装--》完成安装--》继续
5、打包
npm run electron:build打包问题1：
可能会卡在downloading，我们可以根据命令行输出的提示，预先下载包放到或解压到本地目录，就会自动跳过下载开始打包
electron-xxxx.zip，拷贝到C:\Users\用户名\AppData\Local\electron\Cache\electron-xxxx.zip
winCodeSign-xxx.7z，解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-xxx\
nsis-xxx.7z，解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-xxx\
nsis-resources-xxx.7z，解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-xxx\
打包问题2：
如果你的windows用户名是中文，路径带中文有可能会报错Error in script "<stdin>" on line 75 -- aborting creation process
打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件，在 executeMakensis 方法中加入一个参数，表示使用UTF-8编码
//node_module/app-builder-lib/out/targets/nsis/NsisTarget.js
async executeMakensis(defines, commands, script) {
const args = this.options.warningsAsErrors === false ? [] : ["-WX"];
//此处新增
args.push("-INPUTCHARSET", "UTF8");
//结束
for (const name of Object.keys(defines)) {
const value = defines[name];
if (value == null) {
args.push(`-D${name}`);
} else {
args.push(`-D${name}=${value}`);
}
}
}
