Vue CLI转Vite后import.meta被转为import_meta，环境变量读取失败

问题详情 #

• 将项目从Vue CLI升级到Vite，自己发布的开源依赖原本依赖VUE_APP_前缀的环境变量，按照Vite文档改为VITE_前缀，通过import.meta.env.VITE_MANTLE_URL读取
• 启动开发服务器后直接报错：Cannot read properties of undefined
• 开发者工具中看到编译后的代码：

var import_meta = {};
var Connection = import_axios.default.create({
  baseURL: import_meta.env.VITE_MANTLE_URL || "/"
});

问题原因 #

这不是Vite的bug，是它的设计逻辑：Vite默认只会对项目自身源码里的import.meta.env做静态替换，第三方依赖包（包括你自己发布的那个）里的import.meta.env不会被处理——Vite默认认为依赖包是已编译完成的成品，不会修改其中的变量引用，最终打包后import_meta是空对象，访问env自然会报错。

解决办法 #

办法1：在Vite配置中强制注入环境变量 #

修改vite.config.js，通过define选项把环境变量全局注入，让依赖包能读取到：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    define: {
      'import.meta.env.VITE_MANTLE_URL': JSON.stringify(env.VITE_MANTLE_URL || '/')
    }
  }
})

办法2：修改开源依赖逻辑（推荐长期方案） #

既然依赖是你自己维护的，直接调整它的使用方式，避免硬依赖环境变量：

• 改成允许用户传入配置参数的形式，示例：

// 依赖包内代码调整
export function createConnection(baseURL = import.meta.env.VITE_MANTLE_URL || '/') {
  return import_axios.default.create({ baseURL })
}

在项目中使用时，直接传入环境变量：

import { createConnection } from '你的依赖包名'
const Connection = createConnection(import.meta.env.VITE_MANTLE_URL)

办法3：兼容旧环境变量前缀（临时过渡） #

如果不想修改依赖包，可以在Vite中兼容VUE_APP_前缀的变量，将新前缀变量映射过去：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    define: {
      'process.env.VUE_APP_MANTLE_URL': JSON.stringify(env.VITE_MANTLE_URL || '/')
    }
  }
})

同时将依赖包里的import.meta.env.VITE_MANTLE_URL改回process.env.VUE_APP_MANTLE_URL，临时发布一个过渡版本即可。

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