前言：
随着前端的更新迭代，基于js/ts开发的桌面应用框架也越来越多，从heX，electron，nwjs到tauri，Qt，以及Rn和flutter也有桌面应用业务。
而今天的主角正是electron，作为一款2013年推出的桌面应用开发框架，其运行于Chromium内核以及node平台，使得开发者可以使用html+css+js进行开发，然而它的缺点也比较明显，构建时可是带上了整个Chromium。但是作为一款经典的JS桌面应用框架，咱还是得了解一二的。下面给大家分享一下近期的项目搭建心得
准备工作：
环境：
node环境
pnpm：npm i pnpm -g
TypeScript
依赖：
electron：electron框架-20.1.3
electron-builder：项目构建-23.6.0
electron-reload：热重载-2.0.0-alpha.1
架构设计：
软件分为electron主进程（main），和渲染子进程（render），以及HTML页面实例（page）
为了使page能正常调用main，render的api，我做了以下的消息封装，由于子进程和页面是可以正常通信的，但是基于软件内存优化角度上讲，主进程的函数无法直接暴露给子进程，所以得用发布订阅进行消息传递，在page全局我注册了一个invoke函数，通过invoke(type, data)的方式使用主进程的函数或者获取属性（其中type是函数名，
如：app.getAppMetrics()就是invoke("app:getAppMetrics")）
由于electron的内置api较多，远超出函数参数范围，所以需要分模块，
通过文件将electron的模块收集起来
在开发环境方面，我使用了pnpm+pnpm-workspace，将page放在packages中，使得项目管理，启动，构建以及依赖管理更加方便
基本代码：
代码结构：
主进程（main.js）：
const electron = require("electron"); const { initApi } = require("./src/command"); const { app, BrowserWindow } = electron; const path = require("path"); initApi(); function createWindow() { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, //允许使用node preload: path.join(__dirname, "/src/preload"), }, }); if (app.isPackaged) { //判断是否是正式环境 mainWindow.loadFile("./packages/app/dist/index.html"); } else { require("electron-reload")("./", { electron: require(`${__dirname}/node_modules/electron`), }); mainWindow.loadURL(`${"http://localhost"}:${2048}/`); mainWindow.webContents.openDevTools(); } } app.whenReady().then(() => { createWindow(); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } });
子进程：
const { mixinGlobal } = require("../utils"); const { invoke } = require("../events/invokeEvent"); // 通过contextBridge.exposeInMainWorld将函数，属性注册到page的全局环境中 mixinGlobal({ version: { node: () => process.versions.node, chrome: () => process.versions.chrome, electron: () => process.versions.electron, }, invoke, //暴露一个消息函数到vue环境中，调用主进程的api });
工具函数：
const electron = require("electron"); const { contextBridge } = electron; // 将exposeInMainWorld配置化 exports.mixinGlobal = (api) => { Reflect.ownKeys(api).forEach(i => contextBridge.exposeInMainWorld(i, api[i]) ); };
消息中心：
invokeEvent：
const electron = require("electron"); const { ipcRenderer } = electron; const { defer } = require("utils-lib-js"); const eventStr = (exports.eventStr = `@$&#*~`); // 混入一个字符串，用于区别invoke的type const fixKey = (exports.fixKey = (str) => `${eventStr}${str}`); // 发送消息，调函数 exports.invoke = (type, ...arg) => { const { promise, resolve } = defer(); ipcRenderer.on(fixKey(type), (e, ...arg) => resolve(...arg)); ipcRenderer.send(type, ...arg); return promise; };
watchEvent：
const electron = require("electron"); const { ipcMain } = electron; const { eventStr, fixKey } = require("./invokeEvent"); const removeKey = (exports.removeKey = (str) => str.includes(eventStr) ? str.split(eventStr)[1] : str); // 注册消息，绑定函数 exports.watch = (type, fn) => { ipcMain.on( type, (event, ...arg) => event.sender.send( fixKey(type), typeof fn === "function" ? fn(...arg) : fn ) //兼容属性或函数 ); };
electron模块：
app：
const electron = require("electron"); const nameSpace = "app"; const moduleItem = electron[nameSpace]; exports[nameSpace] = { name: moduleItem.name, getAppMetrics: (...arg) => moduleItem.getAppMetrics(...arg), getGPUFeatureStatus: (...arg) => moduleItem.getGPUFeatureStatus(...arg), };
index：
const { watch } = require("../events/watchEvent"); const { app } = require("./app"); exports.initApi = () => { Reflect.ownKeys(electronApi).forEach((moduleName) => { const moduleItem = electronApi[moduleName]; Reflect.ownKeys(moduleItem).forEach((key) => watch(`${moduleName}:${key}`, moduleItem[key]) ); }); }; const electronApi = { app };
在vue的全局调用上述几个函数：
main
import { createApp } from 'vue' import './style.css' import App from './App.vue' declare const invoke: (type: string, data?: any) => Promise<void> // 调用主进程api invoke("app:getAppMetrics").then((params) => { console.log(params) }) invoke("app:getGPUFeatureStatus").then((params) => { console.log(params) }) invoke("app:name").then((params) => { console.log(params) }) createApp(App).mount('#app')
脚本：
使用pnpm start启动整体项目，效果如下
运行pnpm elec:dev单独运行electron程序，
运行pnpm vite:dev单独运行vite项目
运行pnpm vite:build:hot热重载构建vite项目
运行vite:build构建vite项目
运行pnpm builder构建electron项目
问题避坑：
搭建上述软件时遇到以下问题：
1.electron与vite同时启动时第一次会抛错找不到页面，解决方式：先运行vite之后再执行electron
2.dev环境下electron无法监听到vite项目文件热重载，解决方式：1.热重载构建vite项目，2.使用electron-reload监听文件变化
3.子进程无法调用主进程api，解决方式：1.electron/remote(没研究出来)，2.ipcMain和ipcRenderer
4.electron在build时下载速度慢，解决方式：1.TiZi(不太推荐)，2.在.npmrc文件中增加以下配置：
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
或者使用：
npm config set electron_mirror=http://npm.taobao.org/mirrors/electron/
5.传递整个app模块时会提示超出参数最大限制，解决方式：将app分模块拆出，需要使用的单独配置成策略模式（这种写法我认为还有优化的空间，后续可能会修改）
总结：
以上就是文章全部内容，感谢你看到了最后，如果文章对你有帮助，还请点赞支持一下，感谢！
源码：vite-vue-electron: vite3+vue3+electron-v20桌面应用项目模板
相关文档：
Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.
Vite | 下一代的前端工具链
Vue.js - 渐进式 JavaScript 框架 | Vue.js
