I am using vue2, my build tool is [email protected]. In order to debug the vue source component file easily, I add a configuration in output.devtoolModuleFilenameTemplate, the code is as below:

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
}

The devtool config is devtool: 'source-map'.

Now what’s weird is, if the vue component is written in pure javascript, then I can find the source file easily, refer to below:

When click the above highlight part, show the content as below:

However, if the vue component is wrtten in typescript, which means has below declaration in vue component:

<script lang="ts">
  export default {
    ...
  }
</script>

When click the highlight part, it will show below content:

The full content is as below:

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"

Does anybody know why can not show the original source file content in this case ?