如何在开发模式下运行Nuxt Generate以禁用代码压缩排查错误？

Nuxt Generate确实会强制启用生产模式，直接设置NODE_ENV=development不会生效——因为框架内部会覆盖这个变量。要禁用Webpack的代码压缩/混淆，方便定位错误行号，你可以通过以下两种方式实现：

方法一：直接修改nuxt.config.js的Build配置 #

在项目根目录的nuxt.config.js中，修改build字段，手动禁用代码压缩工具并开启SourceMap：

export default {
  build: {
    // 禁用Terser（JS代码压缩混淆工具）
    terser: {
      enable: false
    },
    // 禁用CSSNano（CSS压缩工具）
    cssnano: {
      enable: false
    },
    // 为客户端代码开启SourceMap，让控制台错误能定位到原文件行号
    extend(config, { isClient }) {
      if (isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

修改完成后直接运行npx nuxt generate，生成的静态文件就是未压缩的，且能通过SourceMap在控制台看到错误对应的原代码位置。

方法二：用自定义环境变量临时禁用压缩 #

如果不想每次修改配置文件，可以通过自定义环境变量控制压缩开关，更灵活：

1. 在nuxt.config.js中添加条件判断：

export default {
  build: {
    terser: {
      enable: process.env.NO_MINIFY !== 'true'
    },
    cssnano: {
      enable: process.env.NO_MINIFY !== 'true'
    },
    extend(config, { isClient }) {
      // 只有当NO_MINIFY为true时，开启SourceMap
      if (process.env.NO_MINIFY === 'true' && isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

2. 运行Generate命令时带上自定义变量：

NO_MINIFY=true npx nuxt generate

这种方式可以在需要调试时临时启用未压缩构建，平时保持正常的生产压缩。

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