前端开发您现在的位置是:首页 > 博客日志 > 前端开发

vue项目打包发布后如何调试?

<a href='mailto:'>微wx笑</a>的头像微wx笑2020-12-28 16:59:35前端开发人已围观关键字: vue  调试  

类似 vue 的经过 webpack 打包后的项目如何实现线上调试?vue在生产环境如何调试错误,一般都用什么方案?生产环境没有sourcemap最近在基于 vue-element-admin 做一个公益项目,也

类似 vue 的经过 webpack 打包后的项目如何实现线上调试?0z2编程技术_踩坑日志_进阶指南_无知人生

vue在生产环境如何调试错误,一般都用什么方案?0z2编程技术_踩坑日志_进阶指南_无知人生

生产环境没有sourcemap0z2编程技术_踩坑日志_进阶指南_无知人生


0z2编程技术_踩坑日志_进阶指南_无知人生

最近在基于 vue-element-admin 做一个公益项目,也遇到了同样的问题,经过搜索和自己摸索,有了一些眉目,这里记录一下。0z2编程技术_踩坑日志_进阶指南_无知人生

一、生产环境没有sourcemap

构建build包的时候 可以配置生成map,如果没要求map可以一并部署,0z2编程技术_踩坑日志_进阶指南_无知人生

如果有要求,可以自动化构建,没有map文件的包作为部署包,同时把map文件打包压缩保存起来。如果需要调试 可以使用fiddler之类的工具把map加载进行0z2编程技术_踩坑日志_进阶指南_无知人生

productionSourceMap

  • Type: boolean0z2编程技术_踩坑日志_进阶指南_无知人生

  • Default: true0z2编程技术_踩坑日志_进阶指南_无知人生

    如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。0z2编程技术_踩坑日志_进阶指南_无知人生

#


0z2编程技术_踩坑日志_进阶指南_无知人生

二、生产环境如何调试

函数名称是不会被压缩的,直接用浏览器,F12 -> source ,找到压缩的js ,搜索你的函数名。。打断点,调试吧0z2编程技术_踩坑日志_进阶指南_无知人生

推荐使用 Chrome 的开发者工具,对于压缩的脚本,有格式化的功能,见下图0z2编程技术_踩坑日志_进阶指南_无知人生

image.png0z2编程技术_踩坑日志_进阶指南_无知人生

使用方法:
0z2编程技术_踩坑日志_进阶指南_无知人生

1、点击出错的文件0z2编程技术_踩坑日志_进阶指南_无知人生

2、点击 Pretty-print 格式化代码0z2编程技术_踩坑日志_进阶指南_无知人生

3、打断点调试吧,可以根据右侧的 Call Stack 调用堆栈来找自己写的代码部分0z2编程技术_踩坑日志_进阶指南_无知人生

image.png0z2编程技术_踩坑日志_进阶指南_无知人生


0z2编程技术_踩坑日志_进阶指南_无知人生

相关参考:0z2编程技术_踩坑日志_进阶指南_无知人生

vue 打包后如何调试?0z2编程技术_踩坑日志_进阶指南_无知人生

Vue CLI 配置参考0z2编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()