如何用VSCode调试Vue.js

Posted 2021-01-02 提升自己，迎接未来

VS Code相关插件：
Chinese (Simplified) Language Pack for Visual Studio Code

Debugger for Chrome

ESLint

Vetur

 

一 安装：安装VS Code插件  Debugger for Chrome

二 配置：config下index.js

cacheBusting  由  true 改为 false
//cacheBusting: true,
   cacheBusting:false,

devtool 由 cheap-module-eval-source-map 改为 source-map
 //devtool: ‘cheap-module-eval-source-map‘,
    devtool: ‘source-map‘,

三 配置：launch.json 文件配置
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
  }

四 启动调试