升级至Vite 4.0.4及以上版本后项目生产构建失败求助

问题场景 #

我维护一个长期开发的Vite React项目，此前使用vite 2.9.14搭配@vitejs/plugin-react 1.3.2版本。近期升级到vite 4.0.4和@vitejs/plugin-react 3.0.1后，执行vite build生产构建时出现异常：产物仅包含index.html、public目录资源和一段仅含初始化逻辑的JS文件，所有业务代码（TypeScript/React、SCSS）都未被编译打包，但开发服务器vite运行完全正常。

当前使用的Vite配置如下：

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

const https =
    process.env.CYPRESS === 'true'
        ? undefined
        : {
                cert: fs.readFileSync(
                    path.join(
                        process.cwd(),
                        'dev',
                        'certs',
                        'localhost.cert.pem'
                    ),
                    'utf8'
                ),
                key: fs.readFileSync(
                    path.join(
                        process.cwd(),
                        'dev',
                        'certs',
                        'localhost.key.pem'
                    ),
                    'utf8'
                )
          };

export default defineConfig({
    root: path.join(process.cwd(), 'src'),
    base: '/expense-tracker/',
    publicDir: path.join(process.cwd(), 'public'),
    envDir: path.join(process.cwd(), 'environment'),
    server: {
        port: 3002,
        host: true,
        https,
        proxy: {
            '/expense-tracker/api': {
                target: 'https://localhost:8080',
                changeOrigin: true,
                secure: false,
                rewrite: (path: string) =>
                    path.replace(/^\/expense-tracker\/api/, '')
            },
            '/expense-tracker/oauth2': {
                target: 'https://apps-craigmiller160.ddns.net/oauth2',
                changeOrigin: true,
                secure: false,
                rewrite: (path: string) =>
                    path.replace(/^\/expense-tracker\/oauth2/, '')
            }
        }
    },
    plugins: [react()],
    build: {
        target: 'esnext',
        outDir: path.join(process.cwd(), 'build'),
        emptyOutDir: true
    }
});

问题原因与解决方法 #

核心原因 #

Vite 3+版本对root目录下的入口文件检测逻辑进行了调整。当root配置为src目录时，Vite默认会在src目录下寻找index.html作为构建入口；如果你的index.html不在src目录中（比如在项目根目录），Vite 4无法自动识别入口，导致仅生成基础资源，不会打包业务代码。而开发环境下Vite的检测逻辑相对宽松，所以能正常运行。

具体解决步骤 #

1. 明确指定构建入口
   修改build配置，添加rollupOptions.input来显式指定入口文件路径（替换为你项目实际的入口位置）：

   build: {
       target: 'esnext',
       outDir: path.join(process.cwd(), 'build'),
       emptyOutDir: true,
       rollupOptions: {
           // 假设index.html在项目根目录，这里需要根据实际路径调整
           input: path.join(process.cwd(), 'index.html')
       }
   }
   

   或者，如果你的项目结构是src目录下包含index.html，确保该文件存在即可，无需额外配置。

2. 清除构建缓存
   执行带清除缓存参数的构建命令，避免旧缓存干扰：

   vite build --clearCache
   

3. 验证插件配置
   确认@vitejs/plugin-react没有禁用自动入口检测，插件默认配置即可正常工作，无需额外修改。

验证结果 #

修改配置并清除缓存后，重新执行vite build，检查build目录下是否生成了包含业务代码的chunk文件，即可确认问题解决。

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