如何在vscode中調試vue-cli項目？

一：參考官網文檔，寫的還是很清楚的：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 這個插件，直接在vscode的擴展里面去搜，安過的就忽略。

 

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}/*"
              }
        }
    ]
}