升级至VueJS 3.0.0后Pug渲染失败问题求助

太懂这种被几百个缩进错误炸屏的崩溃感了！刚升级Vue3就踩这种批量文件的坑，确实头疼。给你几个实操性强的解决方案：

方案一：批量修复所有.vue文件的Pug模板缩进 #

写个简单的Node.js脚本，自动遍历所有.vue文件，修正template块里首元素的缩进。这种方式一次性解决问题，不用每次编译都做处理。

示例脚本 #

const fs = require('fs');
const path = require('path');

// 单个文件修复逻辑
function fixPugIndent(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  // 匹配<template lang="pug">后的首行缩进，将缩进替换为换行（保留首元素无缩进）
  const fixedContent = content.replace(
    /(<template lang="pug">)\s+([^\s])/g,
    '$1\n$2'
  );
  
  if (fixedContent !== content) {
    fs.writeFileSync(filePath, fixedContent, 'utf8');
    console.log(`已修复：${filePath}`);
  }
}

// 遍历目录下所有.vue文件
function traverseDir(dir) {
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      traverseDir(fullPath);
    } else if (file.endsWith('.vue')) {
      fixPugIndent(fullPath);
    }
  }
}

// 替换为你的项目src目录路径
traverseDir('./src');

使用注意 #

1. 先备份项目文件（或者提交当前代码到Git），避免脚本意外修改错误
2. 运行脚本：node fix-pug-indent.js
3. 脚本运行后可以全局搜索<template lang="pug">检查修复结果

方案二：编译阶段前置处理（不修改源文件） #

如果不想改动源文件，可以在Webpack编译流程中加入自定义loader，在vue-loader处理之前自动修正缩进。

步骤1：创建自定义loader #

在项目根目录新建fix-pug-indent-loader.js：

module.exports = function(source) {
  // 和脚本一样的替换逻辑，在编译时动态修正
  return source.replace(
    /(<template lang="pug">)\s+([^\s])/g,
    '$1\n$2'
  );
};

步骤2：修改Webpack配置 #

在webpack.config.js中，将自定义loader放在vue-loader之前：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          './fix-pug-indent-loader.js' // 前置处理loader
        ]
      },
      // 其他已有的loader规则（比如pug、css等）保持不变
    ]
  },
  // 其他Webpack配置...
};

这样每次编译时，会先自动修正Pug模板的缩进，再交给vue-loader处理，不会修改本地源文件。

方案三：尝试调整Pug编译配置（不推荐） #

Vue3的@vue/compiler-sfc对Pug的处理依赖pug本身的编译逻辑，你可以尝试调整Pug的选项，比如开启pretty模式？不过亲测这个对首元素缩进的问题帮助不大，而且可能引入其他格式问题，所以优先级低于前两个方案。

内容的提问来源于stack exchange，提问作者user446882