vue-element-admin找不到source-map代码
因为我们在写代码的过程中,需要很多调试,那么有些人就会问了,为什么我导入vue-element-admin的文件之后,源码看不懂,或者很懵,其实是因为在加载的过程中,默认使用了cheap-source-map,就比如下面的图片: 我们在项目运行的浏览器打开开发者模式,但是却发现webpack->.->src目录下的App.vue文件中为例子,出现了很多看不懂的代码,比如上面框框那个,这就会给我们在代码的调试增加了难度,网上解决的办法如下:
config
// https://webpack.js.org/configuration/devtool/
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
把cheap-source-map改成source-map,那么有同学又要问了,为什么我代码不一样,那是因为vue-element-admin进行了源码的改动,原来的代码要使用到source-map被放在了上面,我们需要把productionSourceMap: false, 改成true,很遗憾这个方法我试了,还是得不到解决。 于是我就在网上翻阅了各种资料,最后得出结论。 我们需要把configureWebpack下面的name下面加入一段代码
devtool:'source-map',
如下图位置: 重新运行项目:
npm run dev
此时: 我们可以看到App.vue就出来了 然后右边就是我们的代码:
关注点赞!!!
注意: 调试的时候设置为true 完了之后要改为false 防止代码泄露!
|