Vue2+Webpack5下TypeScript组件无法在浏览器调试工具显示源码

问题场景 #

使用Vue2 + Webpack@5.66.0开发，为方便调试Vue源码组件，配置了output.devtoolModuleFilenameTemplate如下：

const resPath = path.normalize(info.resourcePath)
const isVue = resPath.match(/\.vue$/)
const isGenerated = info.allLoaders
const isTypeScript = info.allLoaders && info.allLoaders.includes('ts-loader')

const generated = `webpack-generated:///${resPath}?${info.hash}`
const vuesource = `vue-source:///${resPath}`

if (isVue) {
    if (!isGenerated || isTypeScript) {
        return vuesource
    } else {
        return generated
    }
} else {
    return vuesource
}

同时设置devtool: 'source-map'。

当前现象：纯JavaScript编写的Vue组件可在浏览器调试工具中正常找到源文件，但使用<script lang="ts">的TypeScript组件，点击调试时会显示loader导入的中间代码，而非原始组件源码：

import mod from "-!../../../node_modules/happypack/loader.js?id=happyTs!../../../node_modules/ts-loader/index.js??clonedRuleSet-4.use[1]!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ManageApprovalAction.vue?vue&type=script&lang=ts"; export default mod; export * from "-!../../../node_modules/happypack/loader.js?id=happyTs!../../../node_modules/ts-loader/index.js??clonedRuleSet-4.use[1]!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ManageApprovalAction.vue?vue&type=script&lang=ts"

原因分析 #

1. 模板判断逻辑错误：当前配置中，TypeScript组件会直接返回vuesource模板，但Webpack处理TS类型Vue组件时，会生成中间过渡模块（即上述loader导入代码），该模块的resourcePath并非原始.vue文件，而是带查询参数的衍生路径，错误给中间模块应用vuesource模板，导致调试工具无法关联到原始源码。
2. Source Map传递不完整：ts-loader、vue-loader或thread-loader/happypack未正确配置生成/传递Source Map，导致中间模块无法映射回原始.vue文件的TS代码。

解决方案 #

1. 修正devtoolModuleFilenameTemplate逻辑 #

调整判断逻辑，区分原始.vue文件和Webpack生成的中间过渡模块，确保只有原始文件使用vuesource模板，中间模块关联回原始文件：

const resPath = path.normalize(info.resourcePath)
// 匹配原始.vue文件（不带查询参数）
const isOriginalVue = resPath.endsWith('.vue') && !info.resourceQuery
// 匹配.vue的script处理模块（带type=script查询参数）
const isVueScriptChunk = info.resourceQuery.includes('vue&type=script')
const hasTsLoader = info.allLoaders && info.allLoaders.includes('ts-loader')

const generated = `webpack-generated:///${resPath}?${info.hash}`
const vuesource = `vue-source:///${resPath}`

if (isOriginalVue) {
    // 原始.vue文件直接返回vuesource
    return vuesource
} else if (isVueScriptChunk) {
    // 提取原始.vue文件路径，让中间模块映射回原始文件
    const originalVuePath = resPath.split('?')[0]
    return `vue-source:///${originalVuePath}`
} else {
    // 非Vue文件，TS相关模块用generated模板，其他用vuesource
    return hasTsLoader ? generated : vuesource
}

2. 确保所有Loader正确生成Source Map #

• vue-loader配置：在Vue的loader规则中开启sourceMap：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          sourceMap: true // 开启source map
        }
      }
    ]
  }
}

• ts-loader配置：在TypeScript的loader规则中开启sourceMap，若使用happypack需同步配置：

// 普通ts-loader配置
{
  test: /\.tsx?$/,
  use: [
    'thread-loader',
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: false, // 关闭仅转译，确保生成source map
        sourceMap: true,
        appendTsSuffixTo: [/\.vue$/]
      }
    }
  ]
}

// 若使用happypack
module.exports.plugins.push(new HappyPack({
  id: 'happyTs',
  loaders: [
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: false,
        sourceMap: true,
        appendTsSuffixTo: [/\.vue$/]
      }
    }
  ]
}))

• thread-loader：默认支持source map传递，无需额外配置，只需保证下游ts-loader已开启sourceMap即可。

3. 验证配置 #

修改后重启Webpack dev server，打开浏览器调试工具，查看Sources面板中的vue-source://路径下的.vue文件，确认TS组件源码是否正常显示，调试断点是否能定位到原始TS代码。

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