關於vscode使用斷點調試vue項目

使用步驟：
1.在lanch.json中配置（注意url的端口號需與webpack配置的一致）

代碼如下:

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:3000/",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*",
            "webpack:///src/*": "${webRoot}/*",
            "webpack:///*": "*",
            "webpack:///./~/*": "${webRoot}/node_modules/*"
        }
    }]
}

2.在vue.config.js文件中加入如下代碼

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

3.需要安裝Debugger for Chrome插件,在VSCode商店中下載即可

4.上述操作完成後，點擊綠色按鈕運行即可

5.備註：
某些版本可能需要單獨配置一個谷歌瀏覽器
右鍵點擊 Chrome 的快捷方式圖標，選擇屬性. 在目標一欄，最後加上 --remote-debugging-port=9222，注意要用空格隔開