vscode debug vue

最新推荐文章于 2025-06-06 21:21:15 发布

原创最新推荐文章于 2025-06-06 21:21:15 发布 · 618 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vscode #javascript

文章介绍了如何在基于VueCLI3的项目中配置vue.config.js以启用source-map，然后设置VSCode的launch.json文件以便进行Chrome浏览器的调试。通过在js代码中设置断点，利用npmrunserve启动服务后，使用VSCode的F5快捷键进入调试模式。

以下基于@vue/cli@3 操作配置。

vue.config.js 配置（没有在项目根目录手动增加一个）

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

launch.json配置（按F5 start debugging没有的话，会自动增加一个文件，替换一下内容）

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