VUE VSCode Debug

1.参考官方文档：

https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

a. VUE3 修改 vue.config.js：

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

b. VSCode 新建 launch.json

内容照抄官网文档：端口号改成自己的代码

{

    "version": "0.2.0",

    "configurations": [      

        {

            "type": "chrome",

            "request": "launch",

            "name": "vuejs: chrome",

            "url": "http://localhost:9527",

            "webRoot": "${workspaceFolder}/src",

            "breakOnLoad": true,

            "sourceMapPathOverrides": {

              "webpack:///src/*": "${webRoot}/*"

            }

          }

    ]

}

C.VSCode 终端cmd里面

//npm install --registry=https://registry.npm.taobao.org

set NODE_OPTIONS=--openssl-legacy-provider
npm run dev

在google 浏览器里面查看 http://localhost:9527/#/dashboard  看看能否显示

D。 VSCode

点击左侧图标白色大三角，（Run and Debug）

再点击绿色小三角标，checkbox 选择vue：chrome  配置

就可以单步调试VUE了