如何从Vue组件内的标签中删除属性？

Question

我想使用data-test的属性（如建议在这里运行测试时），所以我可以参考使用这些属性的标签。

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

将使用以下方法找到该元素：

document.querySelector('[data-test="container"]')
// and not using: document.querySelector('.card-deck')

但我不希望这些data-test属性投入生产，我需要删除它们。我怎样才能做到这一点？（有babel 插件可以做到这一点。）

谢谢！

Answer 1

Linus Borg在此线程中提供的解决方案（针对 Nuxt.js 项目）是：

// 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
        },
      }]
    }
  }
}

其中tagAttributesForTesting是一个包含要删除的所有属性的数组，例如：["data-test", ":data-test", "v-bind:data-test"]。