Vue.js 如何从Vue组件内的标记中删除属性？

我想使用

数据测试

属性（如建议的），因此在运行测试时，我可以使用这些属性引用标记

  <template>
    <div class="card-deck" data-test="container">content</div>
  </template>

但是我不想让这些

数据测试
属性进入生产环境，我需要删除它们。我该怎么做？（对于react，有很多这样做的人。）

谢谢
 本文中提供的解决方案（针对Nuxt.js项目）是：

其中，
tagAttributesForTesting
是一个包含所有要删除属性的数组，如：
[“数据测试”，“数据测试”，“v-bind:data test”]
对于想知道如何执行此操作的人，请继续阅读

根据，覆盖加载程序选项的正确方法是在Vue配置中（在
Vue.config.js
文件中）使用
chainWebpack
方法：


module.exports={
链接网页包（配置）{
config.module
.rule（'vue'）
.use（'vue-loader'）
.点击（（选项）=>{
options.compilerOptions.modules=[{
预转换节点（元件）{
if（process.env.NODE_env！=“production”）返回
常量{attrsMap，attrsList}=元素；
if（属性映射中的“数据测试”）{
删除属性映射[属性]；
const index=attrsList.findIndex（x=>x.name==attribute）；
属性列表拼接（索引，1）
}
返回元素；
}
}];
返回选项；
});
}
};
document.querySelector('[data-test="container"]')
// and not using: document.querySelector('.card-deck')

// nuxt.config.js
module.exports = {
  // ...
  build:   {
    // ...
    extend(config, ctx) {
      // ...
      const vueLoader = config.module.rules.find(rule => rule.loader === 'vue-loader')
      vueLoader.options.compilerModules = [{
        preTransformNode(astEl) {
          if (!ctx.dev) {
            const {attrsMap, attrsList} = astEl
            tagAttributesForTesting.forEach((attribute) => {
              if (attrsMap[attribute]) {
                delete attrsMap[attribute]
                const index = attrsList.findIndex(x => x.name === attribute)
                attrsList.splice(index, 1)
              }
            })
          }
          return astEl
        },
      }]
    }
  }
}