一、失败的经历:
-
先安装vue脚手架vue-cli
npm install @vue/cli -g -
创建vue项目,过程不赘述。已有项目的话,忽略这一步
vue create vue-electron-test -
集成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**