如何为Electron Vite配置自定义文件夹结构

你的自定义目录结构已经很清晰，只需在Electron Forge配置文件中指定各入口路径，并调整Vite渲染器配置即可，具体步骤如下：

1. 修改Electron Forge核心配置文件（forge.config.js） #

这是关键配置文件，需要明确主进程、预加载脚本的路径，同时配置Vite渲染器的根目录：

module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [
    { name: '@electron-forge/maker-squirrel', config: {} },
    { name: '@electron-forge/maker-zip', platforms: ['darwin'] },
    { name: '@electron-forge/maker-deb', config: {} },
    { name: '@electron-forge/maker-rpm', config: {} },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-vite',
      config: {
        // 主进程配置
        main: {
          entry: 'src/main/main.js',
          viteConfig: './vite.main.config.js' // 可选：单独的主进程Vite配置文件
        },
        // 预加载脚本配置
        preload: {
          entry: 'src/preload/preload.js',
          viteConfig: './vite.preload.config.js' // 可选：单独的预加载Vite配置文件
        },
        // 渲染器配置
        renderer: {
          entryPoints: [
            {
              html: 'src/renderer/index.html',
              name: 'main_window',
              viteConfig: './vite.renderer.config.js'
            }
          ]
        }
      }
    }
  ]
};

2. 配置渲染器的Vite文件（vite.renderer.config.js） #

指定Vite根目录为src/renderer，确保Vite能正确识别内部的assets、pages等文件：

import { defineConfig } from 'vite';

export default defineConfig({
  root: './src/renderer', // 关键：绑定渲染器根目录
  build: {
    outDir: '../../.vite/renderer', // 输出目录匹配Electron Forge默认路径
    emptyOutDir: true
  },
  resolve: {
    // 可选：配置路径别名，简化页面间导入
    alias: {
      '@assets': '/assets',
      '@pages': '/pages'
    }
  }
});

3. 主进程/预加载的Vite配置（可选） #

如果主进程或预加载脚本需要Vite的ES模块打包支持，可创建对应配置文件，比如vite.main.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: '../.vite/main',
    emptyOutDir: true,
    lib: {
      entry: './src/main/main.js',
      formats: ['cjs'],
      fileName: () => 'main.js'
    },
    rollupOptions: {
      external: ['electron'] // 排除Electron内置模块，避免冗余打包
    }
  }
});

4. 验证配置 #

完成配置后运行npm run start，Electron即可正常加载自定义路径下的主进程、预加载脚本和渲染器页面。页面跳转时，确保使用基于src/renderer根目录的相对路径，比如：

<a href="/pages/editor/index.html">打开编辑器</a>

内容的提问来源于stack exchange，提问作者ErPolloSgravato