如何在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上面調試改的

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

  }

View Code

 

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