您现在的位置是：网站首页> 编程资料编程资料

Electron集成React和Vue流程方法讲解_vue.js_

2023-05-24 681人已围观

简介 Electron集成React和Vue流程方法讲解_vue.js_

集成React

1. 热调试

在React项目目录下安装Electron

npm install electron

修改package.json文件，增加或将已有的main属性值修改为main.js，在scriptes中添加"electron-start": "electron ."，最终配置文件如下：

{ "name": "electron-react", "version": "0.1.0", "main": "main.js", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "electron": "^20.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-start": "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, globalShortcut } = require("electron"); const path = require("path"); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webContents: { openDevTools: true, //不想要控制台直接把这段删除 } }); win.loadFile("index.html"); } app.whenReady().then(() => { createWindow(); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } });

中的

win.loadFile("index.html");

修改为

win.loadURL("http://localhost:3000/")

打开两个终端，一个运行React

npm start

另一个执行

npm run electron-start

程序运行正常

2. 打包

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

"homepage":".",

随后运行build构建项目，构建完成后可以在build文件夹下执行index.html看看网站是否可以正确运行。

npm run build

如果可以。在main.js中将代码

win.loadURL("http://localhost:3000/")

更改为，即载入静态文件，载入URL可以作为热调试，打包时修改为静态文件。

win.loadFile("./build/index.html");

最终的文件

main.js为：

const { app, BrowserWindow, globalShortcut } = require("electron"); const path = require("path"); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webContents: { openDevTools: true, //不想要控制台直接把这段删除 } }); win.loadFile("./build/index.html"); } app.whenReady().then(() => { createWindow(); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } });

package.json为：

{ "name": "electron-react", "version": "0.1.0", "main": "main.js", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "electron": "^20.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-start": "electron ." }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "homepage":".", "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

目录结构为