首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

Electron-builder打包后,exe运行白屏的问题

2018年12月11日 发布 阅读(1478) 作者:懒炖

源码: https://github.com/lanlejiudunle/Electron/tree/master/electron-demo

问题描述

用electron-builder打包后,出现白屏,不显示任何东西

目录

electron-quick-start做了目录更改,如下

解决

根本问题还是在electron-builder的package.json上的配置有问题。如果把相关资源文件移动app目录,那么需要两个package.json来配置

1.项目根目录下的package.json,这里项目根目录是D:\project\electron\
electron-builderbuild配置,必须在这个package.json

  1. {
  2. "build": {
  3. "productName": "Imqianduan",
  4. "appId": "com.electron.imqianduan-com-app",
  5. "copyright": "© 2018 IMQIANDUAN.COM",
  6. // files必须设置所有文件,不能设置"./app/**/*",否则会报错
  7. "files": [
  8. "./**/*"
  9. ],
  10. "directories": {
  11. "output": "./dist",
  12. // app默认就是"./app"目录,可以不设置
  13. "app": "./app"
  14. }
  15. },
  16. "scripts": {
  17. "start": "electron ./app/index.html",
  18. "dev": "electron --inspect=5858 ./app/index.html",
  19. "packager": "electron-packager ./app Imqianduan --out ./dist --appVersion 1.0.0 --overwrite",
  20. "build:dir": "electron-builder --dir",
  21. "build": "electron-builder"
  22. },
  23. "repository": "",
  24. "keywords": [
  25. "Electron",
  26. "quick",
  27. "start",
  28. "tutorial",
  29. "demo"
  30. ],
  31. "devDependencies": {
  32. "electron": "^3.0.7",
  33. "electron-builder": "^20.38.2",
  34. "electron-packager": "^12.2.0"
  35. }
  36. }

2.app目录下的package.json,这个package主要配置app相关的属性

  1. {
  2. // app名称,不能是中文,不能包含大写
  3. "name": "imqianduan",
  4. // app版本
  5. "version": "1.0.0",
  6. // app 描述
  7. "description": "我是前端",
  8. // app作者
  9. "author": "懒了就炖了 <master@imqianduan.com>",
  10. "license": "MIT",
  11. // 入口文件
  12. "main": "./main.js",
  13. // 依赖
  14. "dependencies": {}
  15. }

这里还引出一个问题,上面name值不能包含大写字母,否则vscode会提示错误

如上,如果app是基于vue的,那么dependencies可能是这样的

  1. "dependencies": {
  2. "axios": "^0.17.1",
  3. "echarts": "^3.8.5",
  4. "querystring": "^0.2.0",
  5. "vue-router": "^3.0.1",
  6. "vuex": "^3.0.1"
  7. }

结果

打包不再报错,执行npm run build:dirnpm run build

  1. D:\project\electron>npm run build:dir
  2. > @ build:dir D:\project\electron
  3. > electron-builder --dir
  4. electron-builder version=20.38.2
  5. loaded configuration file=package.json ("build" field)
  6. writing effective config file=dist\builder-effective-config.yaml
  7. installing production dependencies platform=win32 arch=x64 appDir=D:\project\electron\app
  8. packaging platform=win32 arch=x64 electron=3.0.7 appOutDir=dist\win-unpacked
  9. D:\project\electron>
  1. D:\project\electron>npm run build
  2. > @ build D:\project\electron
  3. > electron-builder
  4. electron-builder version=20.38.2
  5. loaded configuration file=package.json ("build" field)
  6. writing effective config file=dist\builder-effective-config.yaml
  7. installing production dependencies platform=win32 arch=x64 appDir=D:\project\electron\app
  8. packaging platform=win32 arch=x64 electron=3.0.7 appOutDir=dist\win-unpacked
  9. building target=nsis file=dist\Imqianduan Setup 1.0.0.exe archs=x64 oneClick=true perMachine=false
  10. building block map blockMapFile=dist\Imqianduan Setup 1.0.0.exe.blockmap
  11. D:\project\electron>

执行结果:



参考

https://www.cnblogs.com/xueyoucd/p/8006610.html

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •