如何使用Webpack / Laravel调试生产Vue.js 2编译的代码

Question

当我们的生产环境中出现JS错误时，由于所有文件都已压缩，因此几乎无法确定错误的位置。投入生产时是否有最佳实践，但是在发生错误时仍然有可靠的行项目可供参考？

Answer 1

理想情况下，您不应在生产中进行调试。但是，在极少数情况下，您可能需要调试客户端代码以解决任何未捕获的JS错误。以下是必须进行生产调试的步骤：

1. 首先，您需要source-maps。因此，在捆绑生产时，请确保使用设置为devtool的Webpack source-map属性生成它们。进一步了解Webpack website。
2. 默认情况下，源地图的扩展名为.map。这些文件应在生产环境中被阻止。每当打开浏览器开发工具时，浏览器都会尝试提取源映射。理想情况下，您的服务器应阻止对源映射的请求。
3. 当检测到生产事故时，然后使用一些配置，应启用从服务器提供的源映射。有多种方法可以做到这一点：
   1. 一些管理员允许在有限的时间范围内提供源地图。
   2. 对于某些生产用户（通常是生产健全性用户），应始终启用源映射。
   3. 注入特殊的标头，以启用source-maps的服务。可以通过cookie启用它。加载应用程序时，您可以将其添加为查询参数，JavaScript会选择它并将其设置为标头或cookie。

一旦确定您的问题，就应该再次阻止提供源地图。