Vue文件添加lang="ts"后Chrome调试缺失Sourcemap问题求助

我之前也碰到过完全一样的情况——把Vue组件的<script>改成<script lang="ts">后，构建正常但调试时找不到对应的文件，折腾了好一阵才搞定。结合你的配置，咱们调整几个关键地方就能恢复Sourcemap：

1. 完善vue-loader的Sourcemap配置 #

你的vue-loader规则目前没有指定sourcemap相关选项，需要显式开启它对单文件组件内TS代码的sourcemap支持：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    // 开启script部分的sourcemap，开发环境生效即可
    sourceMap: process.env.NODE_ENV !== 'production',
    compilerOptions: {
      preserveWhitespace: false
    }
  }
}

2. 优化ts-loader的配置 #

虽然你已经设置了appendTsSuffixTo，但还需要确保ts-loader生成的sourcemap能被webpack正确整合，显式指定sourceMap: true（默认是true，但显式设置更稳妥）：

{
  test: /\.ts$/,
  exclude: /node_modules|vue\/src/,
  loader: "ts-loader",
  options: {
    appendTsSuffixTo: [/\.vue$/],
    sourceMap: true,
    // 如果开启类型检查，transpileOnly设为false（如果之前是true的话），确保类型检查不影响sourcemap生成
    transpileOnly: false
  }
}

3. 确保vue和vue-template-compiler版本一致 #

版本不匹配是很容易忽略的坑！vue和vue-template-compiler的主版本必须完全相同（比如都是2.6.14或者3.3.4），否则可能导致sourcemap生成异常。可以运行npm list vue vue-template-compiler检查版本，不一致的话重新安装对应版本即可。

4. 验证与缓存清理 #

改完配置后，一定要：

• 清空webpack的缓存（如果用了cache-loader或者webpack自带缓存的话）
• 重启webpack dev server

之后打开Chrome调试面板，在webpack://路径下就能找到你的Vue+TS文件了，断点调试也能正常工作。

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