如何保存process.env.NODE_ENV，避免npm run build包含开发专属代码

我来帮你搞定这个问题——核心是要让构建工具在打包阶段就静态替换环境变量，彻底删掉无用的分支代码，而不是保留条件判断逻辑。

为啥之前的写法没生效？ #

你把process.env.NODE_ENV存在Vuex的state里，构建工具没法静态分析这个变量的最终值（因为它是运行时才确定的），所以打包后还是会保留example: live ? "production" : "development"这段条件判断，没法自动删掉无用分支。

正确的实现方式 #

关键是让process.env.NODE_ENV直接出现在代码的条件判断中，这样构建工具（比如Webpack/Vue CLI/Vite）会在编译阶段就把它替换成具体的字符串（"production"或"development"），然后通过tree-shaking自动删掉永远不会执行的代码分支。

1. 直接在组件中使用环境变量

修改组件的data函数，直接用process.env.NODE_ENV做判断：

data() {
  return {
    example: process.env.NODE_ENV === 'development' ? 'development' : 'production'
  }
}

这样在执行npm run build时，构建工具会把代码替换成：

data() {
  return {
    example: "production"
  }
}

彻底删掉了开发环境的分支代码。

2. 在Vuex中使用的正确姿势

如果一定要在Vuex里存这个状态，也要确保值在构建时就被静态替换：

// store/modules/General.js
const state = {
  // 这里会被构建工具直接替换成true/false
  live: process.env.NODE_ENV !== 'development'
}

但要注意：如果在组件里通过this.$store.state.General.live做判断，构建工具可能还是没法识别这个值是固定的。更稳妥的方式是用Vuex的getter，把静态判断逻辑放在里面：

const getters = {
  isProduction: () => process.env.NODE_ENV === 'production'
}

然后在组件里直接使用这个getter：

data() {
  return {
    example: this.$store.getters.isProduction ? 'production' : 'development'
  }
}

这样构建工具同样能静态分析并优化掉无用分支。

3. 验证是否生效

打包完成后，打开生成的app.js文件，搜索"development"字符串。如果是生产构建，你应该找不到这个关键词——这说明开发环境的分支代码已经被彻底剔除了。

额外提醒 #

• 如果是Vue CLI项目，默认已经配置好了环境变量的静态替换，不需要额外配置；
• 如果是Vite项目，要使用import.meta.env.MODE（对应development/production），原理和process.env.NODE_ENV一致；
• 千万不要把环境变量赋值给一个中间变量后再做判断，那样构建工具就没法静态分析了。

内容的提问来源于stack exchange，提问作者A. L