React+Vite构建Chrome扩展：子目录文件构建路径配置问题

针对你开发Chrome扩展时遇到的子目录文件构建结构异常问题，可通过调整Vite的Rollup配置实现预期效果——让src子目录中的navbar.jsx构建后在dist目录保持对应层级，同时正常生成主入口产物。

核心配置思路 #

• 明确多入口：如果navbar.jsx是Chrome扩展独立页面的入口（比如弹窗、侧边栏），需将其添加到Rollup入口列表，同时保留main.jsx作为主入口。
• 保留目录结构：通过Rollup输出配置，让编译后的文件层级与src目录对应。
• 隔离public资源：确保public目录下的文件输出到dist根目录，不混入子目录。

修改后的vite.config.js #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  base: "",
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  build: {
    rollupOptions: {
      // 配置多入口：主入口+navbar子入口
      input: {
        main: path.resolve(__dirname, "index.html"), // 对应main.jsx的入口html
        navbar: path.resolve(__dirname, "src/components/navbar.jsx"), // 替换为你的navbar实际路径
      },
      output: {
        // 保持文件输出层级与src对应，文件名使用原模块名
        entryFileNames: "[name].js",
        chunkFileNames: "assets/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash].[ext]",
        // 若需严格对应src子目录结构，可改用以下模板
        // entryFileNames: (chunk) => {
        //   const relativePath = path.relative("src", chunk.facadeModuleId);
        //   return relativePath.replace(".jsx", ".js");
        // },
      },
      // 禁止将所有模块打包成单个文件，确保子目录文件独立输出
      preserveModules: true,
      preserveModulesRoot: "src",
    },
    // 确保public资源输出到dist根目录的assets文件夹
    assetsDir: "assets",
  },
});

关键说明 #

1. 多入口判断：如果navbar.jsx是被App.jsx引用的组件而非独立入口，无需添加到input列表——主入口正确引用后，Vite会自动处理，但此时它会被打包进主chunk，不会单独输出到子目录。只有当它是独立页面入口时，才需要在input中单独声明。
2. preserveModules作用：开启后会保留原模块的目录结构，preserveModulesRoot指定根目录为src，这样src/components/navbar.jsx会被编译到dist/components/navbar.js。
3. 输出路径自定义：如果不需要完全保留层级，可使用简单的[name].js；若要严格对应原路径，可使用注释中的自定义函数生成输出路径。

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