在 Vue 3 的生产构建期间从 Vue 模板中删除所有数据测试属性

Question

我在 TS（最后一个 vue-cli）中使用 Vue3。

我想在vue-loader编译.vue文件时获取所有节点（vnodes）元素。我需要读取节点属性并删除所有“数据测试”。

我已经在 vue.config.js 中尝试使用 :

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      // .loader('vue-loader')                       // same with
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
modules: [                                           // never enter here
            {
              preTransformNode(node) {
                // if (process.env.NODE_ENV === 'production') {
                const { attrsMap, attrsList } = node
                console.log(node)
                if (attrsMap['qa-id']) {
                  delete attrsMap['qa-id']
                  const index = attrsList.findIndex(
                    (x) => x.name === 'data-test'
                  )

                  attrsList.splice(index, 1)
                }
                // }

                return node
              }
            }
          ]
        }

        return options
      })
  }
}

我知道转换是在 vue-template-compiler 中完成的。我怎样才能进入编译钩子？

我尝试在模块中使用 preTransformNode 但失败了。

来源：

Answer 1

这里的主要问题是您正在使用 vue-template-compiler 文档，但该包是 Vue 2 的编译器！

在 Vue 3 中，编译器被分成多个 packages 并且目前缺少适当的文档（或者我只是找不到它）

在 API 中也有重大变化 - 而不是 modules，您传递 nodeTransforms (source) 并且转换不是对象，只是函数。

幸运的是，有一个有趣的 video on YT presented by Vue core member Rahul Kadyan which shows the exact use case you need (removing data-test attributes) - code

所以我猜代码应该是这样的：

function removeDataTestAttrs(node) {
  if (node.type === 1 /* NodeTypes.ELEMENT */) {
    node.props = node.props.filter(prop =>
      prop.type === 6 /* NodeTypes.ATTRIBUTE */
        ? prop.name !== 'data-test'
        : true
    )
  }
}

module.exports = {
  parallel: false, // !!IMPORTANT!! - see note below
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          nodeTransforms: [removeDataTestAttrs]                                                                                                        
        }

        return options
      })
  }
}

注意 - 评论中提到的问题（使用 serve 解决方案但在 build 上抛出错误）是由 Vue CLI 使用 thread-loader 用于生产构建。问题是，在使用 thread-loader 时，您不能将函数作为 Webpack 配置的一部分传递（请参阅文档中的 this warning），因此需要设置 parralel: false 才能使其工作... .

在 Vue 3 的生产构建期间从 Vue 模板中删除所有数据测试属性

Removing all data-test attributes from Vue templates during production build in Vue 3

vue.js

vue-loader

vuejs3