Nuxt：如何获取源映射文件以及在生产中在哪里可以找到它们？

Question

我已经尝试了很多解决方案（nuxt.config并更改devtool源映射）但没有任何效果..我需要在生产中获取真正的源代码，这样我就可以像Sentry一样获得真正的错误行，例如请任何人帮助我...

Answer 1

使用NuxtJS 文档中的示例来扩展 Webpack 配置nuxt.config.js：

export default {
  build: {
    extend(config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

然后运行时，将在下面生成npm run build源映射 ( ) ，并且捆绑的 JS 将引用它们。*.js.map.nuxt/dist/

例如，一个名为named的捆绑JS.nuxt/dist/client/05439bf.js将有一个名为named的源映射.nuxt/dist/client/05439bf.js.map，并在其最后一行包含引用注释：

//# sourceMappingURL=05439bf.js.map

如果您随后使用 运行构建npm run start，并在 Chrome DevTools 中打开“Sources”选项卡，您现在将在页面层次结构中看到一个 webpack:// 树，显示 Nuxt 应用程序的原始源，即页面、组件、布局等。

当您将构建部署到生产环境时，请确保*.js.map下面的文件/.nuxt/dist/也已部署。