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 ?
