Vite 插件

使用 Vite 转换和打包 Electron Forge 应用的代码。

从 Electron Forge v7.5.0 开始，为了反映其开发阶段并为维护人员提供快速发布修复和改进的能力，Electron Forge 中对 Vite 的支持被标记为实验性。未来的次要版本可能会包含重大更改，但迁移步骤将在发行说明中列出。有关更多上下文，请参阅 Electron Forge 的v7.5.0 发行说明。

此插件使您可以轻松设置标准 Vite 工具，以编译您的主进程代码和渲染器进程代码。

安装

npm install --save-dev @electron-forge/plugin-vite

用法

插件配置

您必须提供两个 Vite 配置文件：一个用于 vite.main.config.js 中的主进程，另一个用于 vite.renderer.config.js 中的渲染器进程。

例如，这是从 Forge 的配置中获取的Vite 模板

forge.config.js

module.exports = {
  plugins: [
    {
      name: '@electron-forge/plugin-vite',
      config: {
        // `build` can specify multiple entry builds, which can be
        // Main process, Preload scripts, Worker process, etc.
        build: [
          {
            // `entry` is an alias for `build.lib.entry`
            // in the corresponding file of `config`.
            entry: 'src/main.js',
            config: 'vite.main.config.mjs'
          },
          {
            entry: 'src/preload.js',
            config: 'vite.preload.config.mjs'
          }
        ],
        renderer: [
          {
            name: 'main_window',
            config: 'vite.renderer.config.mjs'
          }
        ]
      }
    }
  ]
};

package.json

{
  // ...
  "config": {
    "forge": {
      "plugins": [
        {
          "name": "@electron-forge/plugin-vite",
          "config": {
            "build": [
              {
                "entry": "src/main.js",
                "config": "vite.main.config.mjs"
              },
              {
                "entry": "src/preload.js",
                "config": "vite.preload.config.mjs"
              }
            ],
            "renderer": [
              {
                "name": "main_window",
                "config": "vite.renderer.config.mjs"
              }
            ]
          }
        }
      ]
    }
  }
  // ...
}

配置选项在很大程度上遵循与非 Electron Vite 项目相同的标准。您可以参考此处的 Vite 文档，以获取有关如何配置每个入口点配置文件的更多示例。

项目文件

Vite 的构建配置为主进程和预加载脚本以及每个渲染器进程生成单独的入口点。

您的 package.json 文件中的 main 入口点需要指向 ".vite/build/main"，如下所示

package.json

{
  "name": "my-vite-app",
  "main": ".vite/build/main.js",
  // ...
}

如果使用 Vite 模板，则应该为您自动设置。

高级配置

原生 Node 模块

如果您使用Vite模板创建应用程序，则原生模块大多可以开箱即用。但是，为了避免可能的构建问题，我们建议指示 Vite 将其加载为外部包

vite.main.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      external: [
        'serialport',
        'sqlite3'
      ]
    }
  }
});

热模块替换 (HMR)

为了使用 Vite 的热模块替换 (HMR)，所有 loadURL 路径都需要引用 Vite 插件将为您定义的全局变量

• 开发服务器将以 _DEV_SERVER_URL 为后缀

• 静态文件路径将以 _VITE_NAME 为后缀

对于 main_window，全局变量将分别命名为 MAIN_WINDOW_VITE_DEV_SERVER_URL 和 MAIN_WINDOW_VITE_NAME。下面给出了如何使用它们的示例

main.js

const mainWindow = new BrowserWindow({ /* ... */ });

if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
  mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
} else {
  mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
};

如果使用 TypeScript，则可以这样定义变量

main.js（主进程）

declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
declare const MAIN_WINDOW_VITE_NAME: string;