Vue - 如何从捆绑代码中的模板中删除行？答案

【问题标题】：Vue - How to remove lines from template in the bundled code?Vue - 如何从捆绑代码中的模板中删除行？
【发布时间】：2021-05-20 09:29:24
【问题描述】：

有没有办法从模板中删除行，使相关行不编译并且不存在于捆绑代码中？？

我已经在 .env 文件中定义了环境变量，并且我希望它们保护我的一些代码，因此在使用带有 definePlugin 的构建之后，在缩小的文件中找不到某些代码行的剩余部分。即：使用 VUE_APP_SECRET=false 然后在代码中：

if(process.env.VUE_APP_SECRET == 'true'){..}

这在 JS 部分效果很好，相关行在缩小文件中不存在。

但在模板部分的 .vue 文件中，我尝试使用 v-if 进行此操作，并且相关行仍然出现在缩小文件中。（我为 process.env 使用了一个数据成员，并按照建议 here 从 v-if 访问它）：

<div v-if="globalEnv.VUE_APP_SECRET =='true'"> here goes some secured text </div>

data() {
  return {
    globalEnv: process.env,
  };
},

是否有解决方案可以在某些版本中删除模板的某些部分？？

【问题讨论】：

【解决方案1】：

将布尔值保存为数字 0 或 1 并使用 Number() 进行转换。

<div v-if="Number(globalEnv.VUE_APP_SECRET)"> here goes some secured text</div>

在你的 .env 中使用：

VUE_APP_SECRET=1

【讨论】：

【解决方案2】：

在模板中使用计算属性

<div v-if="myprop"> here goes some secured text 
</div>

computed:
  myprop() {
    return process.env.VUE_APP_SECRET === 'true'
  }
},

【讨论】：