Vite构建目标为ES6时如何正确访问环境变量

核心结论前置 #

import.meta is not available in the configured environment是esbuild转译阶段的语法校验警告，不代表Vite无法正常处理import.meta.env的环境变量注入逻辑，最终构建产物不会保留import.meta语法，可正常在ES6环境运行。

具体疑问解答 #

• 不应该在客户端运行的代码中通过process.env访问环境变量。process.env是Node.js运行时的全局对象，Vite不会默认将其注入客户端打包产物，直接使用会出现取值为undefined、甚至因全局不存在process对象抛出运行时错误的问题。仅当你在Vite配置中手动通过define选项显式声明process.env.xxx的替换规则时，对应字段才会生效，这不属于Vite官方推荐的客户端环境变量访问方案。
• Vite可以保证符合规范的import.meta.env变量被正确注入。Vite处理环境变量的逻辑独立于esbuild的语法转译流程：构建时Vite会先扫描全量代码中的import.meta.env.xxx引用，完成静态字符串替换后，再将处理完的代码交给esbuild转译为ES6版本，最终产物中不会残留import.meta相关语法，环境变量替换逻辑不受target配置影响。
• 不需要额外引入支持字符串替换的Rollup插件处理该兼容问题。如果需要消除该无意义警告，只需在esbuild配置中显式声明import-meta语法支持即可，参考配置如下：

// vite.config.js
export default {
  esbuild: {
    target: 'es6',
    supported: {
      'import-meta': true
    }
  }
}

添加该配置后，esbuild会识别到代码中的import.meta会被前置构建流程处理替换，不会留存到ES6运行时环境，就不会再抛出对应警告。

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