vue+electron安装踩坑实记

434 阅读1分钟

一、失败的经历:

  1. 先安装vue脚手架vue-cli

    npm install @vue/cli -g
    
  2. 创建vue项目,过程不赘述。已有项目的话,忽略这一步

    vue create vue-electron-test
    
  3. 集成electron,使用electron-builder。进入项目根目录vue-electron-test,执行命令

    vue add electron-builder
    

    选择electron的版本,等待安装完成即可。

    注意:这一步很容易出错,安装进度卡住,半天没动静。这时候有的博客建议修改npm为淘宝源或者cnpm,我都尝试了,依然安装报错。

二、成功的方法

我们先在根目录创建 .npmrc 文件,输入以下内容:

registry = https://registry.npm.taobao.org
 
sass_binary_site = https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl = http://cnpmjs.org/downloads
electron_mirror = https://npm.taobao.org/mirrors/electron/
sqlite3_binary_host_mirror = https://foxgis.oss-cn-shanghai.aliyuncs.com/
profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/
chromedriver_cdnurl = https://cdn.npm.taobao.org/dist/chromedriverj

解决安装依赖和打包过慢问题。

现在我们来集成electron

前两步骤都是一样的,第三步我们换一个工具来集成,使用vue-cli-plugin-electron-builder

vue add vue-cli-plugin-electron-builder

等待安装成功即可。

启动项目

npm run electron:serve

成功了!!!

谁能相信这么简单的过程由于墙和工具的原因,我居然花费了整整一天!

请记住关键点:使用**vue-cli-plugin-electron-builder** 而不是**electron-builder**