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

Question

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

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 loader 版本，但没有任何帮助。

我的版本：

"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>

请参阅 how to use Pug loader with Vue 和 source of example。