升级至Vite 4.0.4后无法生成完整JS包，页面空白求助

核心原因 #

你的Vite配置里root已经设为"client"，但rollupOptions.input里却用new URL生成了基于项目根目录的绝对路径，导致Vite在解析入口时出现路径冲突——它会认为入口文件不在root指定的client目录下，最终没有正确打包入口HTML里引用的JS代码。

修复步骤 #

修改vite.config.js中的rollupOptions.input配置，直接使用相对于root（也就是client目录）的相对路径：

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ command, mode }) => ({
  plugins: [react()],

  root: "client",

  build: {
    sourcemap: mode !== "production",
    minify: mode !== 'production' ? false : 'esbuild',

    outDir: "dist/publish",
    rollupOptions: {
      input: {
        // 直接用相对于root（client目录）的路径
        main: "./index.html",
        other: "./other.html",
      },
    },
  },
}));

验证逻辑 #

当root设为client时，Vite会把这个目录作为项目的根目录来解析所有路径。之前用new URL("./client/index.html", import.meta.url).pathname得到的是类似/xxx/project/client/index.html的绝对路径，和root叠加后，Vite实际找的路径会变成client/xxx/project/client/index.html，显然不存在，但Vite没有抛出错误，只是生成了空的JS包。

额外检查 #

• 确认client/index.html里正确引入了你的React入口JS文件（比如<script type="module" src="./src/main.jsx"></script>）
• 执行构建命令后，查看dist/publish下的JS包内容，应该能看到完整的业务代码

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