基于Vite+Vue3+Electron整了一个桌面应用模板

目录

前言：^[1]

准备工作：^[2]

架构设计：^[3]

基本代码：^[4]

代码结构：^[5]

主进程（main.js）：^[6]

子进程：^[7]

工具函数：^[8]

消息中心：^[9]

electron 模块：^[10]

在 Vue 的全局调用上述几个函数：^[11]

脚本：^[12]

问题避坑：^[13]

搭建上述软件时遇到以下问题：^[14]

总结：^[15]

前言：

随着前端的更新迭代，基于 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 启动整体项目，效果如下

运行 pnpmelec:dev 单独运行 electron 程序，

运行 pnpm vite:dev 单独运行 vite 项目

运行 pnpmvite:build:hot 热重载构建 vite 项目

运行 vite:build 构建 vite 项目

运行 pnpmbuilder 构建 electron 项目

运行 pnpm kill:app 关闭打包后程序进程，打包后打开程序报错，导致进程未关闭

问题避坑：

搭建上述软件时遇到以下问题：

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 分模块拆出，需要使用的单独配置成策略模式（这种写法我认为还有优化的空间，后续可能会修改）
6. 在使用 electron-builder 打包后，cannot find module xxx，某个依赖找不到，原因：pnpm 的依赖关系是链接的形式，每次打包后 node_module 文件夹只会下载当前依赖，解决方式：
   1.在.npmrc 文件中增加 node-linker=hoisted 设置扁平化目录结构，这样打包时所有依赖都在 node_module 中。2.设置 electron-builder 配置”asar”:false，然后进到打包的目录源码中运行 pnpm i（不推荐）

总结：

以上就是文章全部内容，感谢你看到了最后，如果文章对你有帮助，还请点赞支持一下，感谢！

源码：vite-vue-electron: vite3+vue3+electron-v20 桌面应用项目模板^[16]

相关文档：

Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.^[17]

Vite | 下一代的前端工具链^[18]

Vue.js – 渐进式 JavaScript 框架 | Vue.js^[19]

参考资料