Electron+Vue环境搭建流程

Amos_Web
971 阅读5分钟

因为现在做的项目用的是Electron框架，前端使用的是Vue,大部分时间不需要来关注electron部分的知识，但是当出现问题的时候定位起来就很被动，所以决定来找一下electron相关的书籍来系统学习一下想过的知识，但直接卡在了第一步环境搭建上面。。。
下面也是来记录一下当时解决问题的思路，希望能帮助其他朋友能少走点弯路。

环境搭建（Vue+Electron）

使用的是vue-cli-plugin-electron-builder来实现在electron项目中引用Vue
下面是执行的是对应的命令：

npm install -g @vue/cli

使用vue-cli来创建一个vue工程，这个命令就是全局安装一下@vue/cli插件，帮助我们快速创建vue工程。

踩坑指南

  • 当我们全局安装了@vue/cli之后使用vue --version查看版本还是以前的版本，并没有更新？

可以使用vue --version来查看对应vue cli版本，不是vue的版本哦～

原因分析：应该是我们以前安装过老版本的vue-cli，在安装新的不会直接更新，需要我们手动删除老的版本文件夹，

vue create <project name>

创建一个叫做project name名称的vue工程,需要我们选择一下配置，也可以使用自定义的配置

WechatIMG7.png

这两条命令执行完后我们就创建好了一个Vue的工程，下面我们在安装一下Electron插件，让我们可以在Electron中使用Vue框架

vue add electron-builder

安装Vue插件electron-builder（也就是Vue CLI Plugin Electron Builder）

WechatIMG9.png

这个时候我们可以看到需要我们选择一个electron的版本，可以选择11/12/13，然后我们选择一个合适的版本 然后继续执行：（我这里选择的是13版本）

成功之后会新增加几个安装包和执行命令：

WechatIMG10.png

后续可以使用 npm run electron:serve命令就可以运行我们第一个Electron程序了～

WechatIMG11.png

踩坑指南

  • 使用最新的Electron版本 我们使用vue安装electron-builder的时候只可以选择11-13版本的Electron（目前我的vue-cli的版本是5.0.4），但是当我们相要更新electron的版本时应该怎么做呢？ 可以单独安装想要的版本：npm install electron@version -E

  • npm ERR! RequestError: connect ETIMEDOUT 52.74.223.119:443 如何解决？ 一般情况下我们单独安装可能会出现这个错误，对于这种情况的话我也是在网上找了好多的教程感觉大多都是设置npm代理，然后再设置一个ELECTRON_MIRROR属性：
    npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

WechatIMG12.png 如果这样的话可以解决这个问题就很好，如果解决不了 往下看...

  • 还是上面的问题 使用上面的方法还解决不了的话，那我们就继续再来看一下

我写这个文章之前创建的项目就是使用上面说的方法后没有生效，我分析应该是代理没有生效或者有什么配置没有删干净导致的，所以如果自己的电脑的运行环境被自己搞的“乱七八糟”的话 也不要着急，静下来思考一下到底是为什么?
首先分析一下上面的报错是连接一个IP地址报错了，这个地址应该就是GitHub的地址，因为我们安装Electron的时候需要下载Electron的依赖包，而且默认是在GitHub上面下载的，这么一说大家应该明白为啥连接不上了... 所以上面的方法就是要我们设置一个npm代理以及Electron的代理地址 这样我们就可以从这个代理地址中下载我们需要的包了。

如果解决不了的话 那我们可以在看一下安装的过程，一般情况下是卡在了node install.js这个命令上面，也就是我们上面说的下载Electron的依赖包（实际上是一个精简版的Chromium浏览器）的过程。

我们来看一下这个命令：node install.js就是去执行electron包下面的install.js文件，我们顺着这个思路来走一下代码执行的逻辑，最后走到@electron/get包里面的artifact-utils.js文件：

WechatIMG13.png 当我们打印出来的时候可以发现electron下载的路径并不是实际的路径，感兴趣的同学可以去打印一下试试，知道原因之后我们就可以自己来发挥了， 比如 可以修改BASE_URL的地址为我们的代理地址、修改path变量的赋值等等 这个是参考链接

总结

  1. 出现问题不要慌，冷静分析原因，一般情况下如果是npm包/Node出现问题的话，他的提示信息都会告诉你问题出在哪里，然后就可以对症下药了。
  2. 在自己手动添加包的时候，运行报错的话一般都是因为版本不匹配导致的，比如我项目中使用stylus和stylus-loader的时候两个版本不匹配的就会出现问题。（我不会告诉你可以去包里面package.json中查看另一个依赖包的版本）
  3. 解决问题的思路不是一开始都会有的，只有不断折腾，不断犯错才能形成自己的解决思路。
avatar
文章
阅读
粉丝