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

本文最后更新于：9 个月前

前言：

准备工作：

前言：

随着前端的更新迭代，基于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关闭打包后程序进程，打包后打开程序报错，导致进程未关闭

问题避坑：

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

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分模块拆出，需要使用的单独配置成策略模式（这种写法我认为还有优化的空间，后续可能会修改）
在使用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桌面应用项目模板

Vite | 下一代的前端工具链

Vue.js - 渐进式 JavaScript 框架 | Vue.js

Electron Vue TypeScript

前端 vue.js 1024程序员节 electron

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

JS如何实现书签导入导出？我是这么做的上一篇

JS案例：实现一个简易版axios 下一篇