时间戳

首页 > 解决方案 > Nuxt：如何获取源映射文件以及在生产环境中在哪里可以找到它们？

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

问题描述

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

标签： vue.jsnuxt.js

解决方案

使用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.map），.nuxt/dist/并且捆绑的 JS 将引用它们。

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

//# sourceMappingURL=05439bf.js.map

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

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

推荐阅读