vue-electron项目创建记录及问题小结解决方案

vue-electron 项目创建记录及注意事项

1、使用vue ui或者命令行创建vue项目

2、添加electron插件

3、安装element-plus:

npm install --save element-plus

4、修改配置文件如下图:

vue.config.js增加配置：

pluginOptions:{
    electronOutput: {
      contextIsolation: false,  //上下文隔离
      nodeIntegration: true,   //nodejs支持
      enableRemoteModule: true  //remote
    }
  }

background.ts修改配置:

问题：1、运行项目会报错

解决方案：

更换ts-loader版本

npm uninstall ts-loader
npm install ts-loader@8.2.0

打包报错:

解决方案:

配置文件加上红框内容：set NODE_OPTIONS=--openssl-legacy-provider &&

打包时会自动下载一些第三方包，报错一般是下载url错误，url中版本号少了“v”,加上后手动下载，放到缓存目录:C:\Users\Administrator\AppData\Local\electron\Cache

解决方案二：

项目根目录下增加  .npmrc  文件

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

打包后，运行exe，界面空白，解决方案:

修改路由配置 router/index.ts:

到此这篇关于vue-electron 项目创建记录及注意事项的文章就介绍到这了,更多相关vue-electron 项目创建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！