Vue 2 迁移至 Vite 后如何兼容 process.env？

方法1：通过Vite配置直接注入process.env #

在项目根目录的vite.config.js中，利用define选项全局注入process.env，将其映射到Vite原生的import.meta.env，让第三方依赖能正常读取环境变量：

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue2()],
  define: {
    'process.env': JSON.stringify(process.env)
  }
})

如果仅需注入特定环境变量（比如仅NODE_ENV），可以更精准地配置：

define: {
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  // 按需添加其他第三方依赖需要的变量
}

方法2：使用vite-plugin-env-compatible插件 #

该插件专为兼容process.env写法设计，配置简单且能自动处理.env文件中的变量：

1. 安装插件：

npm install vite-plugin-env-compatible --save-dev

2. 在vite.config.js中引入并配置：

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import envCompatible from 'vite-plugin-env-compatible'

export default defineConfig({
  plugins: [
    vue2(),
    envCompatible()
  ]
})

插件会自动把.env系列文件中的变量映射到process.env，同时保留import.meta.env的原生用法，无需手动逐个定义变量。

注意事项 #

• 确保项目根目录的.env文件（如.env.development、.env.production）中，环境变量以VITE_开头（Vite默认识别的前缀），插件或define配置会自动处理这些变量。
• 若第三方依赖需要非VITE_前缀的变量，可直接在.env文件中添加，或通过define选项手动注入对应值。

内容的提问来源于stack exchange，提问作者Moritz Großmann