vite 插件 vite-electron

vite 运行时同步运行 electron，vite 打包时同步 electron 打包

1. 安装

npm install vite-electron
// vite-electron 依赖electron-builder打包工具
npm install electron-builder

2. 使用方法

// vite.config.js
import { ViteElectron } from "vite-electron";
export default defineConfig({
  plugins: [ViteElectron()],
});

3. 配置参数

dir : 主进程代码所在目录; 默认：根目录下 main 文件夹

• 用于主进程代码文件夹
• 用于锁定入口文件的路径
• 用于监听目录下文件文件变化

out : 打包输出文件夹路径; 默认：根目录下 dist 文件夹

• 设置主进程渲染进程导出的总目录

entrance: [主进程]代码所在目录的入口文件名;默认为 index.ts

• 入口文件可为.ts 或则.js

bundle : [主进程]代码编译是否文件合并;默认为 true

• 用于把所有主进程代码、第三方包合成为一个文件
• 主进程代码如果没有涉及动态引入文件方面的逻辑，建议把此项设为true
• 配合配置文件package.json 把所有模块放在devDependencies下，打包将不生成node_modules文件夹
• 如打包时 asar 设置为 false, 配合增量文件incremental-update-[version].zip 可做到静默更新

external : [主进程] 文件合成、第三方包合成排除; 默认为 ['electron']

• 此项配置当 bundle 为true时生效
• 配置此项文件合并时会解析第三方包的导入情况，遇到匹配的情况下则保留为 CommonJS 规范导入

exclude : [渲染进程] 第三方包 vite 打包排除; 默认为 ['electron']

• 前段代码打包时如果使用了蕴含 nodejs 的第三方包，打包时会报错，些项目配置主要用于处理此问题
• 相关包保留为 CommonJS 规范导入

build : 打包配置

• electron-builder 的打包配置详情可以查阅相关文档

publicDir : 静态文件文件夹

• 用于主进程的静态资源存放处，用托盘之类的模块使用
• 打包时会把文件的所有文件拷贝到 public 文件夹下
• public 文件夹打包后会和 main/render 处于同级

4. 主进程代码

// main/index.js or main/index.ts
import path from "path";
import { app, BrowserWindow } from "electron";
function createMainWindow() {
  const { NODE_ENV, NODE_PORT } = process.env;
  const url = NODE_ENV
    ? `http://localhost:${NODE_PORT}`
    : `file://${path.join(__dirname, "../render/index.html")}`;

  const win = new BrowserWindow({
    width: 600,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  win.loadURL(url);
}

app.whenReady().then(createMainWindow);
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
});

5. 提供一份简单的打包配置

// package.json
// 配置 main、version
{
  "main": "./dist/main/index.js",
  "version": "0.0.1"
}

// vite.config.js
export default defineConfig({
  plugins: [
    ViteElectron({
      bundle: false,
      build: {
        // 打包arm64格式，[ia32,x64]其他格式可自行配置为true
        arm64: true,
        config: {
          productName: "vite-electron-app",
          appId: "com.vite.electron",
          asar: false,
          directories: {
            output: "build",
          },
          files: ["dist"],
          dmg: {
            contents: [
              { x: 410, y: 150, type: "link", path: "/Applications" },
              { x: 130, y: 150, type: "file" },
            ],
          },
          nsis: {
            oneClick: false,
            allowToChangeInstallationDirectory: true,
            allowElevation: true,
            installerIcon: "",
            uninstallerIcon: "",
            installerHeaderIcon: "",
            createDesktopShortcut: true,
            createStartMenuShortcut: true,
          },
          mac: {
            target: ["dmg", "zip"],
          },
        },
      },
    }),
  ],
});