看一下大概是
map
文件找不到。本人小菜鸟先搜索一番“到底什么是
map
文件?”
网上铺天盖地的解答,找了一个靠谱的:
Source
map
就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便...
在开发组件的时候,发现
source
map
失效了,在chrome的devtool里,不管是debugger跳转,还是点击抛出错误后面的文件路径跳转都直接跳到一个不相关的文件。
经过反复试验,发现是因为
不同
组件目录下的vue文件名字都是index.vue,配置的sour
map
将
不同
目录的index.vue文件混淆了,导致所有目录下的index.vue文件的sour
map
都映射到同一个index.vue文件上了。
我们很容易看出原本在第五行的错误在
webpack
打包后成了第十八行,这是因为前面还多了一串
webpack
的代码,虽然不会影响正常的运行,但是对应我们调试代码还是很不方便的,毕竟我们想要的是直观的看到代码错误是在第几行。(以
webpack
举例,其实不止
webpack
,很多情况下都会出现这个问题)
因为大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。常见的源...
(一)什么是
source
Map
source
Map
其实是一个映射关系,比如打包后的js文件(如dist目录下main.js第78行报错了),
source
Map
能够找到(dist目录下main.js第78行)对应的打包前的源文件(是哪个文件夹下的哪一行)
(二)用法
在
webpack
.config.js 中 module.exports 里面加一行
devtool: '
source
-
map
'
devtool有很多
source
-
map
形式,详情见
webpack
手册devtool部分
E35957-01
August 2012
Oracle GoldenGate for Oracle Installation and Setup Guide, Release 11.2.1
E35957-01