Vue打包时如何移除模板内指定代码，使其不被编译进最终产物

你在JS代码中的写法生效，是因为process.env变量会被Webpack/Vite的DefinePlugin在构建阶段直接替换为静态常量，压缩工具可以识别到永远不成立的if分支，直接将其移除，不会残留到产物中。
而模板中用v-if失效的核心原因是：v-if是运行时判断逻辑，你将process.env挂载到响应式data上后，模板编译器会将其视为运行时可变的变量，不会把判断逻辑当成静态常量处理，因此这段代码会完整保留在编译后的render函数中，压缩工具也无法确定它的运行时结果，不会主动删除。

以下是可落地的实现方案：

• 方案1：使用条件编译插件（最推荐，通用性强）
  现有成熟的构建插件可以直接实现模板层面的条件编译，在编译模板的阶段就直接移除不符合条件的代码，完全不会进入后续打包流程。

  • Vue CLI 项目：安装vue-cli-plugin-conditional-compile，无需额外复杂配置，直接在模板中用注释包裹需要管控的代码即可：

  <!-- #if process.env.VUE_APP_SECRET === 'true' -->
  <div> here goes some secured text </div>
  <!-- #endif -->
  

  • Vite 项目：安装vite-plugin-vue-conditional-compile，配置完成后使用相同的注释语法即可生效。

• 方案2：自定义模板编译转换规则
  如果你不想引入第三方插件，可以自行修改Vue编译配置，在AST（抽象语法树）处理阶段直接移除符合条件的节点：
  以下是Vue CLI项目的配置示例：

  // vue.config.js
  module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options => {
          options.compilerOptions.modules = options.compilerOptions.modules || []
          options.compilerOptions.modules.push({
            preTransformNode(astEl) {
              // 识别带有指定环境变量判断的v-if节点
              if (astEl.if && astEl.if.includes('VUE_APP_SECRET')) {
                if (process.env.VUE_APP_SECRET !== 'true') {
                  // 环境变量不满足时直接移除节点
                  return null
                }
                // 环境变量满足时移除v-if判断，避免残留运行时代码
                delete astEl.if
                delete astEl.ifConditions
              }
              return astEl
            }
          })
          return options
        })
    }
  }
  

• 方案3：Vue3 + Vite 静态常量优化
  如果你使用Vue3 + Vite技术栈，可以直接在模板中使用v-if="import.meta.env.VUE_APP_SECRET === 'true'"，Vite会在构建阶段将import.meta.env的变量替换为静态常量，配合ESBuild/Terser的死代码删除能力，也可以将永远不成立的分支从产物中移除。注意不要将环境变量挂载到响应式data上，否则会失去静态常量特性。

注意：所有方案都需要确保判断条件使用的是构建阶段就能确定值的环境变量，不要使用运行时才会赋值的动态变量，否则无法实现构建阶段移除代码的效果。

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