小记:把react项目从web迁移到electron

electron的启动模版:electron项目启动模版资源-CSDN文库

使用vite构建,包含了react react-router-dom tailwindcss mui  主副进程通讯

使用:

解压后使用vscode打开

终端里:npm install

然后npm run dev

打包:

windows系统计算机
npm run build:win
国产操作系统计算机
npm run build:linux

src/main/index.js://创建窗口,ipc通讯
..............//更新单位名称ipcMain.on("updatecompany", async (event, arg) => {// console.log(arg);const settings = {method: "PUT",headers: {Accept: "application/json","Content-Type": "application/json"},body: JSON.stringify({companyname: `${arg}`})};const res = await fetch(`http://192.168.1.99:7077/api/v1/store/company`, settings);const data = await res.json();event.returnValue = data;});//获取单位名称ipcMain.on("getcompany", async (event) => {const res = await fetch(`http://192.168.1.99:7077/api/v1/store/company`);const data = await res.json();event.returnValue = data;});...............

scr/preload/index.jsimport { contextBridge } from "electron";
import { electronAPI } from "@electron-toolkit/preload";// Custom APIs for renderer
const api = {};// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {try {contextBridge.exposeInMainWorld("electron", electronAPI);contextBridge.exposeInMainWorld("api", api);} catch (error) {console.error(error);}
} else {window.electron = electronAPI;window.api = api;
}

src/renderer/scr/....:

company.jsx 示例文件

...
useEffect(() => {//ipc通讯const result = window.electron.ipcRenderer.sendSync("getcompany");companyRef.current.value = result.companyname;}, []);
...

home.jsx 主页文件

main.jsx 启动文件

routemain.jsx 路由定义文件