源码： 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-builder的build配置，必须在这个package.json

{
  "build": {
    "productName": "Imqianduan",
    "appId": "com.electron.imqianduan-com-app",
    "copyright": "© 2018 IMQIANDUAN.COM",
    // files必须设置所有文件，不能设置"./app/**/*"，否则会报错
    "files": [
      "./**/*"
    ],
    "directories": {
      "output": "./dist",
      // app默认就是"./app"目录，可以不设置
      "app": "./app"
    }
  },
  "scripts": {
    "start": "electron ./app/index.html",
    "dev": "electron --inspect=5858 ./app/index.html",
    "packager": "electron-packager ./app Imqianduan --out ./dist --appVersion 1.0.0 --overwrite",
    "build:dir": "electron-builder --dir",
    "build": "electron-builder"
  },
  "repository": "",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "devDependencies": {
    "electron": "^3.0.7",
    "electron-builder": "^20.38.2",
    "electron-packager": "^12.2.0"
  }
}

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

{
  // app名称，不能是中文，不能包含大写
  "name": "imqianduan",
  // app版本
  "version": "1.0.0",
  // app 描述
  "description": "我是前端",
  // app作者
  "author": "懒了就炖了 <master@imqianduan.com>",
  "license": "MIT",
  // 入口文件
  "main": "./main.js",
  // 依赖
  "dependencies": {}
}

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

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

"dependencies": {
    "axios": "^0.17.1",
    "echarts": "^3.8.5",
    "querystring": "^0.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
}

结果

打包不再报错，执行npm run build:dir，npm run build

D:\project\electron>npm run build:dir
> @ build:dir D:\project\electron
> electron-builder --dir
  • electron-builder version=20.38.2
  • loaded configuration file=package.json ("build" field)
  • writing effective config file=dist\builder-effective-config.yaml
  • installing production dependencies platform=win32 arch=x64 appDir=D:\project\electron\app
  • packaging       platform=win32 arch=x64 electron=3.0.7 appOutDir=dist\win-unpacked
D:\project\electron>

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

执行结果：

参考

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