VScode调试Vue-element-admin、Vue项目

第一步：扩展 中输入 Debugger for Chrome 安装该扩展；

第二步：创建 launch.json 文件，选择 Chrome 后 把原有的内容替换 为以下内容，一个是谷歌浏览器、一个火狐浏览器的配置，记住把 url 的端口号改为本地开发的端口号；

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8090",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "firefox",
            "request": "launch",
            "name": "vuejs: firefox",
            "url": "http://localhost:8090",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [{
                "url": "webpack:///src/",
                "path": "${webRoot}/"
            }]
        }
    ]
}

第三步：找到项目 vue.config.js 中的 configureWebpack 添加 devtool: ‘source-map’；

第四步：按照开发习惯启动项目终端启动 npm run dev 或 打开 npm 脚本 快速启动；

最后：运行和调试 按操作启动即可；