VSCode调试Vue项目，断点为灰色空心圆，提示unbound breakpoint？

Question

今日想使用Debugger for Chrome，但是一顿操作后结果如标题T T。默认配置下提示unbound breakpoint，一番搜索得知该插件现在改了什么东西，进settings.json修改"debug.javascript.userPreview":false后提示Breakpoint set but not yet bound，好吧还是同一个意思。断断续续配了一天还是不行，求大佬帮忙。
配置如下。

vue.config.js:

const port = process.env.port || process.env.npm_config_port || 8080 // dev port

module.exports = {
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js')
  },
  configureWebpack: {
    devtool: 'source-map'
  }
}

babel.config.js:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  env: {
    debug: {
      sourceMaps: true,
      retainLines: true,
    },
  },
}

launch.js:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "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}/*"
      }
    }
  ]
}