由于 lang="ts" 属性，基于 typescript 的 vue 文件缺少源映射

Question

我遇到了我想将我的 vue 文件从 JS 切换到 Typescript 的问题。

它们看起来像这样（非常标准）

<template>
...
</template>

<script>
...
</script>

并将它们与打字稿一起使用，我读到我需要将脚本标签调整为<script lang="ts">。这很好用，代码很高兴通过 webpack 构建/转换，我可以启动我的应用程序。唯一的问题是，一旦我将lang="ts" 放入脚本标记中，Chrome 就不再以调试模式显示这些文件，因此似乎缺少它们的源映射信息（尽管我对源映射了解不多）。所以我想知道如何正确获取源映射以及在 Chrome 开发人员模式下显示的文件，因为显然我将需要它再次进行调试。给出了所有其他文件的源映射，并且这些文件在 Chrome 中以开发模式显示（例如，对于普通的 .ts 文件）以及尚未基于 TS 且因此没有lang="ts" 属性的 vue 文件。

这里是我的 ts 和 vue 文件的 webpack 提取

devtool: 'inline-source-map',
module: {
    rules: [
      { test: /\.vue$/,
        loader: 'vue-loader'
      },
      { test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ...
    ]
},
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json', '.ts']
  },

以及我的源地图和其他一些可能相关的 tsc 设置

"sourceMap": true,                  
"strict": true,                         
"alwaysStrict": true,                  
"moduleResolution": "node",          
"allowSyntheticDefaultImports": true,  
"esModuleInterop": true,                   

/* Source Map Options */
// "sourceRoot": ""; 
//"mapRoot": "",
//"inlineSourceMap": true,              
// "inlineSources": true  

Answer 1

我发现devtool = 'cheap-module-eval-source' 可以工作，但 .vue 文件的目录没有显示，文件结尾有点奇怪，但可以工作。但我不认为这是一个很好的解决方案。所以如果某人有更好的选择，请告诉我。 然而，我面临的下一个问题是 Sonarqube 不接受 lang="ts"，因为他们还没有实现它（这是那里的功能请求）。

所以最终对我有用的解决方案不是使用 .vue 文件，而是使用https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components 中描述的基于类的 sfc 组件以及一个 vscode 插件来突出显示内联 html 代码。 通过这种方式，我得到了工作 TS、工作源映射以进行调试、工作 Sonarqube、工作语法突出显示、工作、linting。 我个人的印象是，虽然 vue.js 很棒，但如果你离开人迹罕至的地方，周围的环境还是有相当大的差距。