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-fedplatform: 打包成的平台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