基于Vite+Vue3+Electron整了一个桌面应用模板
目录
前言：
随着前端的更新迭代，基于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项目
问题避坑：
搭建上述软件时遇到以下问题：
-
electron与vite同时启动时第一次会抛错找不到页面，解决方式：先运行vite之后再执行electron
-
dev环境下electron无法监听到vite项目文件热重载，解决方式：1.热重载构建vite项目，2.使用electron-reload监听文件变化
-
子进程无法调用主进程api，解决方式：1.electron/remote(没研究出来)，2.ipcMain和ipcRenderer
-
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/
-
传递整个app模块时会提示超出参数最大限制，解决方式：将app分模块拆出，需要使用的单独配置成策略模式（这种写法我认为还有优化的空间，后续可能会修改）
总结：
以上就是文章全部内容，感谢你看到了最后，如果文章对你有帮助，还请点赞支持一下，感谢！
源码：vite-vue-electron: vite3+vue3+electron-v20桌面应用项目模板
相关文档：
Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.
