Electron常见问题

2019-09-28 00:00:00 by 【6yang】, 634 visits, 收藏 | 返回
Electron常见问题
 
  1. 正常编译打包(npm run builder)时会出现operation not permitted
提示:EPERM: operation not permitted, lstat 'C:\Users\jack\AppData\Local\Temp\electron-download-yu2HR1\electron-v6.0.10-win32-ia32.zip'
解决方案:
是因为electron-packager 版本太高 14.0.6
可以用 "electron-packager": "^12.1.0",
--package.json--
网上copy做法有问题:"builder-error": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --app-version=0.0.1 --electron-version=1.4.13",
正确做法(64位):"builder": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --app-version=0.0.1 --electron-version=1.4.13",
或:"package:win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out --icon=assets/app-icon/win/app.ico"
注意:打一次打包会下载electron-win版依赖本包到c:/xxx/temp下,如果这个版本已经有了,下次打包就不再去下载 (打包总共大概所花时间为20S左右,.exe包大概在85M)
 
  1. 关于打包版本及参数
electron-packager 执行命令说明
"electron-packager . APP --platform=win32 --out=out --build-version=1.3.1 --arch=ia32 --electron-version=6.0.10 --ignore=node_modules --ignore=.gitignore --overwrite"
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
.APP 打包后.exe的名称
--out=out 为打包后当前的文件目录
--ignore 可以忽略文件夹
--electron-version=6.0.10 electron 版本
--arch:决定了使用 x86 还是 x64 还是两个架构都用
--platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
--overwrite: 如果打包后的文件存在,就覆盖安装
注意这里
  • --electron-version 并不是真正的electron(npm install electron -g全局的版本 ) --version (v1.4.13) ,而是package.json 自己定义的"electron": "^6.0.10"
  • 可以用npm install electorn -g 升级安装
  • 版本越低,打包相对来说会小很多
 
  1. 网上下载经常碰到老版本问题
a、除了使用上述命令下载electron-quick-start项目代码外,还可以直接到GitHub上下载该项目。
b、下载下来的electron-quick-start项目的package.json文件中的electron版本可能已经过时了,此时在执行npm install&&npm start时会报错。
错误类似如下:
Downloading electron-v0.34.3-win32-ia32.zip
Error: read ECONNRESET
这个错误说明两个问题:1)需要升级electron;2)网络连接问题
所以针对上述两个问题可以做如下处理:
1)先说网络问题
解决办法:更换源为淘宝
更换方法:执行如下两条命令(更多信息可查看参考文档《开发electron程序的npm准备工作》)
npm config set registry https://registry.npm.taobao.org/
npm config set electron_mirror http://npm.taobao.org/mirrors/electron/
2)升级electron,有两种方法:
一个是忽略,网络连接成功后,会在执行 npm install && npm start后会自动升级;
二是手动执行 npm install electron --save-dev
c、特别提示,这些命令都需要在文件当前路径下执行
 
  1. vue cli3.0+ & Node 版本升级建议
    1. 偿试过很多方案,在window 10下用nvm 去切换node 版本。可能是网络或翻墙问题,无法做到很好的资源下载;导致nvm切换非常不顺利。
    2. nvm 命令:
  • nvm uninstall 8.9.4
  • nvm ls available
  • nvm install 10.16.3
  • nvm use 10.16.3
    1. 解决方案是: 直接从nodejs(国外)下载稳定版本,目前最稳定在10.16.3(20190928) ;
    2. 我们平时项目中,大部份的国项目node 版本在8.9.4(稳定版本),但由于vue 3.0(推荐 8.11.0+) ,所以干脆升级到最新稳定版本
    3. 关于老项目,还要注意的是node_modules要先删除,同时删除package-lock.json 然后,再运行npm install
    4. 安装 npm install @vue/cli -g --registry=https://registry.npm.taobao.org
 
  1. git bash 软件使用vue clie3选择问题
我觉得git bash很好用,比设计的脑残软件好用多了。
推荐:用命令winpty vue.cmd create xxxxx
 
 
  1. 搭建好后vue cli3, 自动安装electron
"devDependencies": {
     "@vue/cli-plugin-babel""^3.11.0",
     "@vue/cli-plugin-eslint""^3.11.0",
     "@vue/cli-service""^3.11.0",
     "@vue/eslint-config-standard""^4.0.0",
     "babel-eslint""^10.0.1",
     "electron": "^6.0.10",
     "eslint""^5.16.0",
     "eslint-plugin-vue""^5.0.0",
     "node-sass""^4.9.0",
     "sass-loader""^7.1.0",
     "vue-cli-plugin-electron-builder""^1.4.0",
     "vue-template-compiler""^2.6.10"
   }
安装 :electron 和 electron-builder
npm install electron vue-cli-plugin-electron-builder -D
会卡在这一步
直接 ctrl + C取消,再npm install 即可
 
  1. 正确的整体配置
增加:yarn config set registry https://registry.npm.taobao.org
//还原镜像yarn config set registry http://registry.npmjs.org
    1. 配置要求:node 10.16.3 + npm 6.9.0/6.4.0
    2. 安装 yarn: npm install yarn -g
    3. 安装 vue3.0+ :npm install @vue/cli -g
    4. 安装 electron : npm install electron -g (可不安装)
    5. 创建vue项目git bash 命令:winpty vue.cmd create electron-dev 或vue create electron-dev
    6. 安装 electron-builder: vue add electron-builder
    7. 完成后,yarn run electron:serve (热更新运行)
    8. 完成编译,yarn run electron:build (编译)
 
基本上在公司网络环境下,都没有问题,如果网络因素卡住,可以ctrl+c ,再次运行即可。
"name": "electron-vue-dev",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"electron": "^6.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"vue-cli-plugin-electron-builder": "^1.4.0",
"vue-template-compiler": "^2.6.10"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
 
share

    图片原图

    loading

    loading