Nuxt生产环境如何获取sourcemap文件？其生成后存放位置在哪里？

绝大多数配置不生效的原因是仅修改了devtool参数，没有开启Nuxt框架层面的生产环境Source Map开关，框架默认会在生产构建时强制关闭Source Map生成。

Nuxt2和Nuxt3的配置逻辑有差异，以下是分别的配置方法，按步骤操作即可生成可映射到原始源码的Source Map：

1. Nuxt 3 配置方案 #

在nuxt.config.ts（或.js）中添加如下配置：

export default defineNuxtConfig({
  // 开启生产环境sourcemap
  sourcemap: {
    server: true,
    client: true
  },
  vite: {
    build: {
      // 指定sourcemap类型为hidden，避免打包后代码末尾暴露sourcemap地址，防止源码泄露
      sourcemap: 'hidden'
    }
  }
})

如果你的项目用的是Webpack打包器而不是Vite，替换上面的vite配置为webpack配置即可：

export default defineNuxtConfig({
  sourcemap: {
    server: true,
    client: true
  },
  webpack: {
    build: {
      devtool: 'hidden-source-map'
    }
  }
})

2. Nuxt 2 配置方案 #

在nuxt.config.js中添加如下配置：

export default {
  // 开启生产环境sourcemap
  productionSourceMap: true,
  build: {
    // 配置devtool为隐藏类型，同时保证映射准确性
    devtool: 'hidden-source-map',
    // 关闭代码压缩的标识符混淆，避免映射偏移
    terser: {
      terserOptions: {
        keep_classnames: true,
        keep_fnames: true
      }
    }
  }
}

3. 验证配置生效 #

打包完成后查看输出目录确认map文件生成：

• Nuxt3默认输出目录.output/public/_nuxt/下会存在对应的.map文件，和打包后的js文件一一对应
• Nuxt2默认输出目录dist/_nuxt/下会存在对应的.map文件

4. 错误映射使用方法 #

不需要将Source Map文件部署到生产环境服务器，避免源码泄露，拿到生产环境报错的栈信息后本地做映射即可：

• 安装source-map工具依赖：npm i source-map -D
• 写简易转换脚本，传入报错的js文件路径、对应map文件路径、报错的行号列号，即可输出对应的原始源码文件路径、真实行号、对应代码片段。

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