VSCode断点调试Vue项目

1、VSCode安装插件：Debugger for Chrome，并确保你的电脑上安装了 Chrome 浏览器；

2、VSCode菜单“调试-->打开配置”（即 .vscode\launch.json 文件），把 webRoot 配置项改成 "${workspaceFolder}/src"。注，原来的值是 "${workspaceFolder}"，因为Vue项目源代码是在 src 目录，所以要改。我的配置内容如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

3、编辑Vue的配置文件 vue.config.js （如果没有则自己新建一个），添加 configureWebpack 的配置项 devtool ，值为 "source-map" 。我的 vue.config.js 内容如下：

module.exports = {
    publicPath: "/",
    outputDir: "dist",
    assetsDir: "static",
    lintOnSave: process.env.NODE_ENV === "development",
    productionSourceMap: false,
    devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: "http://127.0.0.1:90/admin",
                changeOrigin: true,
                pathRewrite: {
                    ["^" + process.env.VUE_APP_BASE_API]: ""
                }
            }
        }
    },
    configureWebpack: {
        devtool: "source-map"
    }
};

4、启动vue项目：npm run serve 或 npm run dev 。如果之前已经启动过了，要关掉重新启动，因为我们改了配置文件；

5、关闭正在运行的Chrome浏览器（以防有干扰），VSCode菜单“启动-->启动调试”，这时候VSCode会以管理员身份打开一个Chrome窗口，并自动打开项目首页；

6、在VSCode中的代码设置断点，浏览器执行，遇到断点时，VSCode会高亮显示。同时，Chrome浏览器按F12，也可以看到相同的断点调试信息。