Vite配置读取环境变量失效：多环境HTML入口不生效

安全阿岳

2026-7-14

问题排查与解决

1. 直接用Vite传入的`mode`参数做判断

你代码里用env.MODE == "staging"来分支，除非你在.env.staging里显式写了MODE=staging，否则env.MODE大概率是undefined，导致判断失效。直接用配置函数参数里的mode就行——这是Vite命令行传入的真实模式值：

export default defineConfig(({ command, mode, ssrBuild }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    base: env.BASE_PATH,
    plugins: [react()],
    build: {
      rollupOptions: {
        input: {
          main: mode === "staging" ? resolve(__dirname, 'staging.html') : resolve(__dirname, 'index.html')
        }
      }
    },
  }
})

2. 确认环境变量文件配置正确

项目根目录得有.env.staging文件，里面必须写清楚BASE_PATH，比如：
```
BASE_PATH=/staging/
```
文件名必须严格对应模式（.env.${mode}），别写错字。

3. 别忘了导入`resolve`方法

代码里用了resolve(__dirname, ...)，必须在配置文件顶部导入path模块的resolve：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path'; // 这行不能少

没导入的话resolve是undefined，生成的路径无效，Vite会自动 fallback 到默认的index.html。

4. 加日志验证配置是否生效

在配置文件里加两行日志，跑命令时看控制台输出，确认模式和环境变量是否正确加载：

export default defineConfig(({ command, mode, ssrBuild }) => {
  console.log('当前运行模式:', mode);
  const env = loadEnv(mode, process.cwd(), '');
  console.log('加载的BASE_PATH:', env.BASE_PATH);
  // ... 其他配置
})

执行tsc && vite build --mode staging后，要是控制台显示当前运行模式: staging且BASE_PATH是你设置的值，就说明前面的配置没问题；要是不对，就检查命令有没有执行错、文件路径是否正确。