vue2 + vue-cli + typescript 无法生成正确的 sourcemap，导致无法进行浏览器调试，如何解决？

Question

先看普通的 vue2 + js 项目，这是使用 vue-cli 创建的：

可以看到能够正常进行调试，虽然左侧菜单中有很多同名的 HelloWorld.vue 文件，但我们需要的刚好就是那个没有问号 ? 参数的文件，使用 ctrl+p 输入文件名能够很方便的找到。

而且这里的源码是完整的，包含了 <template> 和 <style>。

这是 vue2 + ts 的情况，也是使用 vue-cli 创建的：

显然这并不是源码。

其中一个文件看起来像是源码，但是只有 <script> 中的内容，而且断点能够进来：

ts 文件的调试是正常的，并且也没有过多的同名文件，比如 main.ts：

以上例子所使用的 sourcemap 类型都是 "source-map"，使用 vue-cli 创建项目后，仅修改了 vue.config.js，如下所示：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: config => {
        config.devtool = 'source-map';
    },
});

tsconfig.json 的 sourceMap 选项默认就是 true 没有进行修改，如下所示：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}