技术标签 TAGS

专业技术精选

首页 > 技术 > Electron开发

Electron常见问题

2019-09-28 00:00:00 by 【6yang】, 2026 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"
]
}
 
我要评论 本文来自:http://www.6yang.net/articles_view.php?id=1494&cid=26
share

    图片原图

    loading

    loading