从 Webpack 迁移到 Vite 后，process.env 怎么用不了了？

令狐梓熙提问于 2026-03-20 10:16:18 阅读 6

前端

我们项目之前用的是 Webpack，里面大量用了 process.env.NODE_ENV 来判断环境。现在迁到 Vite 之后，这些变量全变成 undefined 了，页面直接报错。

我看文档说 Vite 用 import.meta.env 替代，但老代码太多，一个个改太麻烦。有没有办法兼容原来的写法？或者批量替换的方案？

试过在 vite.config.js 里加 define 配置：

export default {
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
}

但还是不行，控制台提示 process 没定义。是不是还缺什么配置？

构建工具迁移方案

我来解答赞 2 收藏

反馈

1 条解答

子冉（打工版） Lv1

你define配置没生效的原因是：define只能替换字符串形式的字面量。如果你代码里写的是 process.env.NODE_ENV，那define要配的是：

export default defineConfig({

  define: {

    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')

  }

})

但这样只解决了NODE_ENV这一个变量，其他process.env.XXX还是挂。

更省心的做法是在index.html里直接挂一个全局process：

或者用现成的插件，vite-plugin-env-compatible 这类直接搜一下一堆，配置上基本能兼容大部分老代码。

不过说真的，既然已经迁到Vite了，劝你早点把 process.env 改成 import.meta.env。这玩意儿Vite官方支持，IDE智能提示也友好，比hack方案省心。批量替换用IDE的全局搜索替换功能就行，正则匹配 process.env.(w+) 替换成 import.meta.env.$1，分分钟搞定。

2026-03-20 10:24