React TS项目Vite配置.env代理遇TS类型错误求解决方案

问题根源 #

vite.config.ts 运行在 Node.js 环境中，不能直接使用 import.meta.env——这个变量是 Vite 专为浏览器/客户端代码注入的，Node 环境不识别它，这才是触发 TypeScript 类型错误的核心原因。

具体修复步骤 #

1. 用 Vite 内置 loadEnv 函数加载环境变量 #

修改 vite.config.ts，通过 loadEnv 读取对应环境的配置变量：

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig(({ mode }) => {
  // 加载当前环境的 env 文件变量
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [react()],
    build: {
      outDir: 'build',
      chunkSizeWarningLimit: 3000,
    },
    server: {
      port: 3000,
      host: '127.0.0.1',
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          // 建议添加该配置，避免跨域校验失败
          changeOrigin: true,
        },
      },
    },
  }
})

2. 补充 Node 环境类型提示（可选） #

如果需要在 vite.config.ts 中获得环境变量的类型提示，可在项目根目录的类型定义文件（如 vite-env.d.ts）中补充：

declare namespace NodeJS {
  interface ProcessEnv {
    readonly VITE_API_BASE_URL: string
  }
}

3. 验证配置 #

• 执行 npm run dev，Vite 会自动加载 .env.development 中的变量
• 执行 npm run build，会加载 .env.production 中的变量

额外注意事项 #

• 确保 .env 文件名符合规则：.env.development 对应开发模式，.env.production 对应生产模式
• 自定义环境变量必须以 VITE_ 开头，Vite 才会自动加载并暴露

内容的提问来源于stack exchange，提问作者Abhijit Mondal Abhi