vue 使用vscode debug

项目场景：

最近项目中使用vscode开发vue项目，项目开发过程中需要debug，原先是使用浏览器debug，发现不太好用，跟vue代码不太对应。

---

问题描述

看到vscode有调试功能，于是想配置一下vscode使用vscode来debug，本来预想很简单，但是配置完一直达不到效果。断点颜色都是灰色，没变化，切换状态也不起作用。

---

原因分析：

后来经过调试发现配置有问题，配置成功之后，断点颜色都变成了红色。配置过程参照了vue官方的配置方法，https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html。官网使用了这样的配置：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

---

解决方案：

我这里的问题是，我已经有这样的配置了，不能覆盖已有的配置

于是我采用了这样的方式

chainWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {}else{
config.devtool('source-map')
}
}