如何在Nuxt 3中开启代码压缩？解决npm run generate产物未压缩问题

我来帮你搞定这个问题！你遇到的TS错误是因为Nuxt 3彻底重构了构建系统，原来Nuxt 2里的build.html.minify配置项已经被移除了——现在Nuxt 3用Nitro作为底层构建引擎，所以得用新的配置方式。

正确的配置步骤 #

1. 确保JS/CSS资源被压缩（Vite配置）

Nuxt 3默认用Vite构建，它自带的esbuild压缩已经足够高效，不过你可以在nuxt.config.ts里明确配置，确保压缩开启：

export default defineNuxtConfig({
  vite: {
    build: {
      minify: 'esbuild' // 默认值，也可以换成'terser'（需要额外安装terser依赖）
    }
  }
})

2. 开启静态HTML文件压缩（Nitro配置）

静态生成的HTML文件压缩由Nitro负责，你需要在配置里开启相关选项：

export default defineNuxtConfig({
  nitro: {
    // 自动压缩所有静态资源（HTML、CSS、JS、图片等）
    compressPublicAssets: true,
    // 如果需要自定义HTML压缩规则，可以添加下面的配置
    prerender: {
      html: {
        minify: {
          collapseWhitespace: true,
          removeComments: true,
          minifyCSS: true,
          minifyJS: true
        }
      }
    }
  }
})

验证效果 #

配置完成后，重新执行npm run generate，然后查看.output/public目录下的HTML文件——你会发现文件体积明显变小，代码已经被压缩了。

为什么原来的配置没用？ #

Nuxt 3和Nuxt 2的架构差异很大：Nuxt 2基于Webpack，而Nuxt 3用Vite+Nitro组合，所以构建相关的配置项结构完全不同。原来的build.html.minify属于Webpack时代的配置，自然在Nuxt 3里不存在，也就会抛出TS类型错误啦。

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