一：參考官網文件，寫的還是很清楚的：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

二：需要安裝的東西和初始專案

2.1  用vue-cli初始化一個vue專案，我這裡專案名就叫vue，這裡不介紹，不是這個要講的。問度娘吧。

2.2 用vscode開啟這個專案，修改 專案 vue/build/config/index.js 裡面的 dev 裡面的 devtool: 'cheap-module-eval-source-map' 為 devtool: 'source-map' ，讓在編譯的時候生成.map檔案，能對應找到原始碼位置。

module.exports = {
  dev: {

      ..........

    // https://webpack.js.org/configuration/devtool/#development
    // devtool: 'cheap-module-eval-source-map', // 原來的

    devtool: 'source-map', // 為了能在vscode上面除錯改的

     ...................

  }

2.3 安裝 Debugger for Chrome

2.4 點選左邊的除錯的設定，去修改launch.json檔案

三：修改launch.json檔案：

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            
 
"request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://10.202.2.112:8081",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
              }
        }
    ]
}