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

iamtsfw2025-06-16 8:42

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

javascript 复制代码

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;
  });

...............

javascript 复制代码

scr/preload/index.js

import { 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 示例文件

javascript 复制代码

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

home.jsx 主页文件

main.jsx 启动文件

routemain.jsx 路由定义文件