React + Electron 搭建桌面应用 解决 打包后.exe空白 问题

1.创建 React 项目

# 确保已安装 Node
# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 knownsec-fed 项目
create-react-app knownsec-fed
# 启动项目( create-react-app 真的超级方便啊)
cd knownsec-fed && npm start
# 代码执行完毕后,浏览器 http://localhost:3000/ 会出现界面,React 项目即创建成功

2.添加 Electron 包

# 在knownsec-fed 目录下安装 Electron 包
npm install -save electron

3.相关配置

配置 main.js

// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow

function createWindow () {
//创建浏览器窗口,宽高自定义具体大小你开心就好
mainWindow = new BrowserWindow({width: 800, height: 600})

  /* 
   * 加载应用-----  electron-quick-start中默认的加载入口
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  */
  // 加载应用----适用于 react 项目
  mainWindow.loadURL('http://localhost:3000/');
  
  // 打开开发者工具，默认不打开
  // mainWindow.webContents.openDevTools()

  // 关闭window时触发下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow)

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
  // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
   // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
  if (mainWindow === null) {
    createWindow()
  }
})

// 你可以在这个脚本中续写或者使用require引入独立的js文件.   

配置 package.json

{
  "name": "knownsec-fed",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 配置启动文件
  "homepage":".", // 
  "dependencies": {
    "electron": "^1.7.10",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron ." // 配置electron的start，区别于web端的start
  }
}   

启动 Electron

# 这里要打开两个窗口

# 启动react项目
npm start
# 启动electron
npm run electron-start

3.打包 React 项目

首先修改 main.js, 因为现在你要将 react 项目打包在 build 文件夹下面，所以加载应用处改成如下。

// 加载应用----react 打包
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, './build/index.html'), // 注意这里修改
  protocol: 'file:',
  slashes: true
}))
// 加载应用----适用于 react 开发时项目
// mainWindow.loadURL('http://localhost:3000/');

默认情况下，homepage 是 http://localhost:3000，build 后，所有资源文件路径都是 /static，而 Electron 调用的入口是 file :协议，/static 就会定位到根目录去，所以找不到静态文件。在 package.json 文件中添加 homepage 字段并设置为"."后，静态文件的路径就变成了相对路径，就能正确地找到了添加如下配置：

"homepage":"."

# 打包 react 代码  根目录下面将多出一个 build 文件夹
npm run-script build


# 若报错,则将 package.json 中的注释删除

4. 打包 Electron

# 安装 electron-packager

# knownsec-fed 目录下安装 electron-packager包
npm install electron-packager --save-dev
# 安装 electron-packager 命令
npm install electron-packager -g

electron-packager 命令介绍：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

• location of project: 项目的本地地址，此处是相对路径 ./build，当然也可以写绝对路径
• location of project: 项目名称，此处是 knownsec-fed
• platform: 打包成的平台
• architecture: 使用 x86 还是 x64 还是两个架构都用
• electron version: electron 的版本 

在 package.json 文件的在 scripts 中加上如下代码：

"package": "electron-packager ./build knownsec-fed --platform=win32 --arch=x64 --win --out ./out --electron-version 6.0.10" 

 重要！！！在打包前将 main.js 和 package.json 两个文件复制到 build 文件夹下，同时修改 build 文件夹下的 main.js

// 加载应用-----  electron-quick-start中默认的加载入口
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, './index.html'), // 修改
    protocol: 'file:',
    slashes: true
  }))

# 开始打包 
npm run-script package