Vue与Electron的使用

喵咪老师QvQ

已于 2022-07-11 10:06:01 修改

阅读量1.4k

点赞数 1

文章标签： electron javascript 前端

于 2022-07-08 16:24:13 首次发布

本文链接：https://blog.csdn.net/qq_58276512/article/details/125680154

版权

基本使用：vue2或者vue3都可使用。

注意：将vue项目变成PC桌面只需要安装一个插件，我vue项目是是通过vue-cli创建的。

1.通过指令安装electron-builder插件

vue add electron-builder

会出现让你选择版本安装，直接选最新版本即可，其它不用管。

2.或者可以通过vue ui 页面去添加 vue-cli-plugin-electron-builder插件这种方法也可以将vue项目变成pc桌面端项目。

遇到的坑点如下：

第一个坑：vue的electron插件只支持hash路由模式，才能运行桌面端应用。

第二个坑：使用electron运行会报如下错:

//这就是控制台打印的第一个错。

  e 这个 Object is of type 'unknown'.

// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'


  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()
})

ps：出现这错误的主要原因是在electron启动的过程中会去连接一个electron的devtools，可以直接将其引入的地方和使用的地方注释掉就可以不再报错。

第三个坑：运行的时候没有找到名为loaderContext.getOptions的方法。

TypeError: loaderContext.getOptions is not a function

解决方法：指定安装 ts-loader@~8.2.0 版本（亲测有效）

npm i -D ts-loader@~8.2.0

(ps：还可以将vue-cli脚手架降低版本到4.x，暂未测试过。)

第四坑：在运行npm run electron:build打包的时候报获取不了gitthup一堆东西：

⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.

原因：可能是网速过慢导致打包出错，亦或是访问不到国外的镜像资源，通过一下设置后重新运行即可。

 解决方法：

//将 Electron 镜像源设置为淘宝镜像源
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

//将 Electron-builder 镜像源设置为淘宝镜像源
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/