为何import.meta.env在vite.config.ts中无法正常使用？

核心原因：运行环境与类型作用域的差异 #

• 运行环境不同：vite.config.ts是在Node.js环境下执行的脚本，而你的React业务代码是被Vite编译后在浏览器环境运行的。Vite只会给浏览器环境的代码自动注入import.meta.env的相关变量和类型定义，Node.js环境本身没有这个全局属性，所以TypeScript会报错。
• 类型定义的作用域不覆盖配置文件：你项目里的importMeta.d.ts是给应用业务代码用的，Vite会把它纳入业务代码的类型检查范围，但vite.config.ts作为Vite的启动配置文件，属于Node.js执行的脚本，TypeScript会用@types/node的类型规则来检查它，自然找不到import.meta.env的类型定义。

补充：Vite配置文件的正确取环境变量方式 #

Vite官方提供了专门在配置文件中读取环境变量的方法——loadEnv函数，示例代码：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // 加载对应模式的环境变量
  const env = loadEnv(mode, process.cwd(), '')
  // 直接使用env中的变量
  console.log(env.VITE_SOME_RANDOM_ENV_VARIABLE)
  
  return {
    // 你的Vite配置项
  }
})

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