vue-element-admin找不到source-map代码

因为我们在写代码的过程中,需要很多调试,那么有些人就会问了,为什么我导入vue-element-admin的文件之后,源码看不懂,或者很懵,其实是因为在加载的过程中,默认使用了cheap-source-map,就比如下面的图片:
在这里插入图片描述
我们在项目运行的浏览器打开开发者模式,但是却发现webpack->.->src目录下的App.vue文件中为例子,出现了很多看不懂的代码,比如上面框框那个,这就会给我们在代码的调试增加了难度,网上解决的办法如下:

config
  // https://webpack.js.org/configuration/devtool/#development
  .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 防止代码泄露!

GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐