electron将vue项目变成电脑桌面应用

首先，我们在目录下建立一个vue项目

vue create electron

在项目中导入electron

vue add electron-builder

之后你的项目就会发生一些改变
执行npm run electron:serve 试着运行一下
还有electro是需要依赖的 你可以检查一下系统中是否有生成electron和electron-builder两个文件夹 如果没有那打包时是肯定会报错的
之后我们打包

npm run electron:build

还有就是如果你的电脑用户名是中文 那也会报错的
这时
我们需要找到项目中的
node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件
在其中找到executeMakensis方法
加入args.push("-INPUTCHARSET", “UTF8”);
参考代码如下

//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}`);
      }
    }

然后你会看到dist_electron文件夹中有一个exe文件可以直接打开你的项目
还有一个win-unpacked文件夹 里面也有一个exe文件 也是你的项目 只是这个的更节能