Electron.js+Vite+TypeScript项目构建失败问题求助

算力阿峰

2026-7-10

解决Electron Forge Vite+TS模板生产构建RollupError问题

问题根源

生产构建时触发RollupError无法解析index.html，核心原因有两个：

渲染进程的Vite配置未明确指定HTML入口文件，导致Rollup无法识别构建起点
生产环境下的HTML加载路径指向了未被打包的源码目录，而非构建后的产物目录

步骤1：配置渲染进程Vite文件（vite.renderer.config.ts）

在项目根目录创建/修改vite.renderer.config.ts，指定HTML入口和构建输出目录：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 和Electron Forge默认构建目录对齐
    outDir: '.vite/renderer',
    rollupOptions: {
      // 明确渲染进程的HTML入口路径
      input: {
        main: './src/views/index.html'
      }
    }
  }
});

步骤2：修正窗口加载路径代码

修改/src/windows/mainWindow.ts的加载逻辑，确保生产环境指向构建后的产物：

import { BrowserWindow } from 'electron';
import path from 'path';

export class MainWindow extends BrowserWindow {
  constructor() {
    super({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, '../preload/preload.js')
      }
    });

    if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
      // 开发环境直接访问Vite dev server路径
      this.loadURL(`${MAIN_WINDOW_VITE_DEV_SERVER_URL}/src/views/index.html`);
      this.webContents.openDevTools();
    } else {
      // 生产环境指向构建后的渲染进程HTML文件
      this.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
    }
  }
}

步骤3：验证主进程Vite配置

主进程配置保持现有内容即可，无需额外修改：

import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    browserField: false,
    mainFields: ["module", "jsnext:main", "jsnext"],
  },
});