如何配置Nuxt 3禁止生成单行HTML代码（SSR模式）

针对你遇到的SSR模式下HTML被压缩成单行的问题，以下是有效的配置方案，替换你现有nuxt.config.js中的相关部分即可：

export default defineNuxtConfig({
    // 保留你原有的components、css、runtimeConfig配置
    components: {
        global: true,
        dirs: ['~/components', "~/components/plugins"]
    },
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css',
        'primeicons/primeicons.css',
        'primeflex/primeflex.css',
        '~/public/global.css'
    ],
    runtimeConfig: {
        apiBase: 'http://localhost:8080',
        replaceApiBase: 'http://127.0.0.1:8080',
        public: {
            apiBase: 'http://localhost:8080',
            replaceApiBase: 'http://127.0.0.1:8080'
        }
    },

    // 新增/修改以下核心配置
    vue: {
        compilerOptions: {
            preserveWhitespace: true
        },
        serverRenderer: {
            format: true
        }
    },

    build: {
        minify: false,
        terser: {
            compress: false,
            mangle: false,
            format: {
                beautify: true
            }
        }
    },

    vite: {
        build: {
            minify: false,
            rollupOptions: {
                output: {
                    indent: true
                }
            }
        }
    }
})

关键配置说明 #

1. Vue服务端渲染器配置
   Nuxt3的SSR HTML输出由@vue/server-renderer控制，生产环境默认关闭格式化，必须显式设置vue.serverRenderer.format: true开启多行排版；preserveWhitespace: true确保模板中的空白和换行不被合并。

2. Build与Vite配置

   • 禁用build.minify和vite.build.minify避免整体代码压缩
   • 配置terser选项彻底关闭JS代码的混淆与压缩，避免间接影响HTML输出
   • rollupOptions.output.indent确保打包后的代码保持缩进格式

为什么之前的配置无效？ #

你之前设置的vite.minifyHTML是错误的配置项，Vite的HTML压缩控制在vite.build.minify中；且核心问题在于Vue服务端渲染器的默认格式化行为，而非单纯的代码压缩开关。

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