如何在使用vue js时修复pug中的缩进错误

Question

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

Syntax Error: Error: C:\Users\veneg\Desktop\***\assets2\src\views\template\Socials.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",

- user16751547

---

在网上进行了快速搜索，似乎 Vue Eslint 不支持 Pug。有一个处于 alpha 阶段的包：https://www.npmjs.com/package/eslint-plugin-vue-pug - paddyfields

你知道这是为什么吗？毕竟，eslint不在package.json的依赖项中。而且我压根没有他的配置。 - user16751547

Answer 1

建议使用@webdiscus/pug-loader代替pug-plain-loader，以获得更好的体验。

这个加载器支持在Vue模板中使用缩进：

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

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

- biodiscus

---

那么在三年前它是如何工作的？并且你提供的带有错误的示例，pug必须是全局包装。 - user16751547

@EugenyVenegrad，这是关于pug-plain-loader的缩进问题Vue 3模板上的意外标记“indent”，自2020年以来一直存在。 - biodiscus

@EugenyVenegrad "带有错误的示例" 是什么意思？ - biodiscus

Pug模板标签必须包含在全局标签中，比如div，否则会出现错误。尝试运行您的代码即可。 - user16751547

它是自定义的Pug加载器，官方的不起作用。 - user16751547