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

Question

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

资料来源：

• https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme
• https://vue-loader.vuejs.org/options.html

Answer 1

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

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

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

幸运的是，YT 上有一个由 Vue 核心成员 Rahul Kadyan 制作的有趣视频，其中展示了您需要的确切用例（删除data-test属性） -代码

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

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 配置的一部分传递（请参阅文档中的此警告parallel: false），因此需要进行设置才能使其工作......

Vite（更新 - 22.06.22）

// vite.config.ts
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
    )
  }
}

export default defineConfig(() => {
  return {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            nodeTransforms: isProd ? [removeDataTestAttrs] : [],
          },
        },
      }),
    ]
  }
})