【解决】vue-element-admin找不到source-map代码

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 防止代码泄露！