Vue项目VSCode中launch.json的sourceMapPathOverrides配置错误致断点未触发

核心问题分析 #

你遇到的是source map路径映射不匹配导致的断点未绑定问题——Chrome能识别Sources面板里的文件，但VSCode无法将编辑器中的文件和source map记录的路径对应上。

调整方案 #

1. 先明确路径对应关系 #

在Chrome Sources面板中，找到红色高亮的目标文件，右键查看其路径前缀（比如是webpack://axios/adriantma/src/xxx.vue），这是source map里记录的文件路径；而VSCode工作区中文件的实际路径是${workspaceFolder}/src/axios/adriantma/src/xxx.vue（对应你设置的webRoot为${workspaceFolder}/src）。

2. 修改sourceMapPathOverrides配置 #

删除多余的无效映射规则，只保留精准匹配的规则：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:5000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack://axios/adriantma/src/*": "${webRoot}/axios/adriantma/src/*"
      }
    }
  ]
}

3. 额外排查点 #

• 如果上述规则不生效，尝试去掉webpack://前缀：

  "sourceMapPathOverrides": {
    "axios/adriantma/src/*": "${webRoot}/axios/adriantma/src/*"
  }
  

• 确认Vue项目的vue.config.js（或webpack.config.js）中已开启source map，devtool设置为source-map或eval-source-map（开发环境推荐）。
• 重启VSCode调试会话和本地服务，确保配置生效。

内容的提问来源于stack exchange，提问作者impo