利用react结合electron进行PC端APP开发的配置方法

        使用electron结合react进行开发，然而却不想再在electron起一个http服务？想要在electron其中的同时完成react的编译？react静态资源文件无法访问？以下是解决办法

如果你要用react来进行electron开发，你一定会遇到一个最基础的问题，那就是如何在electron启动的同时编译react代码为html代码。当然，如果你愿意在electron中进行http方式进行访问，当我没说。不过，利用http协议访问需要事先启动http服务，使用react-scripts start启动会让进程阻塞，react-scripts start命令执行后将无法执行其他命令，所以无法使electron和react同时启动。

 

如果你还没为你的开发环境添加electron和react依赖，那请你先去添加完成。

1、修改package.json中的scripts配置项，配置react和electron的同时启动。因为使用start命令会直接造成进程阻塞，所以此处使用build命令。在scripts配置项中添加一项：

"electron-start": "react-scripts build & electron .",

2、修改main.js文件实现直接访问编译后的HTML文件，其实主要修改的地方就只有index.html的相对地址而已，原来的地址是"index.html"，修改后如下：

mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, './build/index.html'),
            protocol: 'file:',
            slashes: true
        }
    ))

3、在package.json中修改homepage配置项,如果没有此项，直接添加即可，此项作用是修改react打包后资源文件的基础访问路径

"homepage":"./"

修改后效果：

 

4、最后运行命令npm electron-start即可 

放上整体package.json文件：

{
  "name": "qm",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "homepage": "./",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "electron": "^16.0.2",
    "electron-packager": "^15.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "set BROWSER=none& react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "react-scripts build & electron ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

main.js文件：

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800, height: 900, webPreferences: {
            preload: path.join(__dirname, "preload.js")
        }
    })
    mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, './build/index.html'),
            protocol: 'file:',
            slashes: true
        }
    ))
    // mainWindow.loadURL('http://localhost:3000/')
    // mainWindow.loadFile("build/index.html").then(r => console.log(r))
    //开启开发者工具
    mainWindow.webContents.openDevTools()
    mainWindow.on('close', () => mainWindow = null)
}

app.on("ready", createWindow)
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', () => {
    if (mainWindow === null) createWindow()
})