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

问题描述

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

我想在 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 但失败了。

来源：

解决方法

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

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

此外，API 也发生了重大变化 - 您传递了 modules (source) 而不是 nodeTransforms，并且转换不是对象，只是函数。

幸运的是，Vue 核心成员 Rahul Kadyan 展示了一个有趣的 video on YT，它展示了您需要的确切用例（删除 data-test 属性） - 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-loader vue.js vuejs3