如何使用vue js修复pug缩进错误

Question

我们有一个完整的项目网络，超过15个项目，每个项目都已经工作了三年以上。今天，重新安装节点模块后，突然到处出现错误:

Syntax Error: Error: C:UsersvenegDesktop***assets2srcviewstemplateSocials.vue:2:1
1|
> 2|   .social
-------^
3|     a.social__link.rtl(v-for="(soc, index) in socials" :key="index" :href="soc.link" target="blank")
4|       icon(:name="soc.name" nofill)
5|
unexpected token "indent"

有超过3000个文件的项目与此错误，我怎么能解决这个问题?

我尝试使用pug加载器版本，但没有任何帮助。

我的版本:

"vue-loader": "~15.6",
"vue-style-loader": "~4.1",
"vue-template-compiler": "~2.6",
"webpack": "~4.29",
"webpack-bundle-analyzer": "~3.0",
"webpack-cli": "~3.2",
"webpack-dev-server": "~3.1",
"webpack-hot-middleware": "~2.24",
"webpack-merge": "~4.2"
"@vue/cli-plugin-babel": "4.2.0",
"@vue/cli-plugin-eslint": "4.2.0",
"@vue/cli-service": "4.4.1",
"@vue/eslint-config-airbnb": "5.0.2",
"pug": "2.0.4",
"pug-plain-loader": "1.0.0",

Answer 1

尝试使用@webdiscus/pug-loader代替pug-plain-loader。

这个加载器支持Vue模板中的缩进:

<template lang='pug'>
h1 Hello Pug!
p Text
</template>

查看如何在Vue中使用Pug加载器和示例源。