我在TS中使用Vue 3(上一个Vue-cli)。
我想在vue加载器编译.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内部完成的。我如何进入compile hook?
我曾尝试在模块中使用preTransformNode,但失败了。
资料来源:
- https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme
- https://vue-loader.vuejs.org/options.html
3条答案
按热度按时间knpiaxh11#
这里的主要问题是,您正在使用
vue-template-compiler
文档,但该包是Vue 2的编译器!在Vue 3中,编译器被拆分为多个packages,目前缺少适当的文档(或者我只是无法找到它)
此外,API中也有重大变化--您传递的不是
modules
,而是nodeTransforms
(源代码),转换不是对象,而是函数。幸运的是,Vue核心成员Rahul Kadyan提供了一个有趣的video on YT,它显示了您需要的确切用例(删除
data-test
属性)-code所以我猜代码应该是这样的:
注-注解中提到的问题(解决方案使用
serve
,但在build
上抛出错误)是由于Vue CLI使用thread-loader
进行生产构建造成的。问题是使用thread-loader
时,您无法将函数作为Webpack配置的一部分传递(参见文档中的此警告),因此需要设置parralel: false
才能使其工作......维特(更新-2022年6月22日)
nhaq1z212#
版本-CLI 5 +版本3.2:
vcudknz33#
维生素4 +维生素E 2.7