如何阻止Nuxt 3中HTML-Minifier将页面源码压缩为单行

你之前使用的build.html.minify是Nuxt 2的遗留配置，在Nuxt 3中已经不再生效——Nuxt 3的HTML压缩与格式化逻辑由后端引擎Nitro负责，同时Vue编译器的空格处理也会影响最终输出结构。

正确配置方案 #

在nuxt.config.ts中替换原有配置为以下内容，即可让页面源码保持格式化结构：

export default defineNuxtConfig({
  // 配置Vue编译器保留空格与格式
  vue: {
    compilerOptions: {
      preserveWhitespace: true,
      whitespace: 'preserve'
    }
  },
  // 禁用Nitro的HTML压缩功能
  nitro: {
    html: {
      minify: false
    },
    // 可选：若不需要压缩静态资源，可一并关闭
    compressPublicAssets: false
  }
})

可选：区分开发/生产环境 #

如果希望开发环境保留格式化（方便调试），生产环境仍启用压缩（优化性能），可以添加环境判断：

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      preserveWhitespace: process.env.NODE_ENV !== 'production',
      whitespace: process.env.NODE_ENV !== 'production' ? 'preserve' : 'condense'
    }
  },
  nitro: {
    html: {
      minify: process.env.NODE_ENV === 'production'
    },
    compressPublicAssets: process.env.NODE_ENV === 'production'
  }
})

生效步骤 #

1. 保存nuxt.config.ts修改
2. 重启本地开发服务器，或重新构建生产环境部署包
3. 再次查看页面源码，即可看到类似GitHub的格式化HTML结构

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