vue不同版本/cli不同版本,在调试,源代码断点时,分离出源代码方便查看,配置大致一致,这里记录一下。
//vue.config.js 文件
module.exports = {
/*一般在configureWebpack配置,不要在chainWebpack里头配置,这个配置好些与cli有关,可能无效*/
configureWebpack:{
devtool: "cheap-module-eval-source-map",
output: {
/*通过devtoolModuleFilenameTemplate,分离出要调试的源代码,方便查看和调试*/
devtoolModuleFilenameTemplate: (info) => {
/**info是一个对象,如
{
identifier: './src/views/Home.vue',
shortIdentifier: './src/views/Home.vue',
resource: './src/views/Home.vue',
resourcePath: './src/views/Home.vue',
absoluteResourcePath: 'E:\\third\\mydot\\src\\views\\Home.vue',
allLoaders: '',
query: '',
moduleId: '',
hash: 'bb51',
namespace: ''
}*/
const resPath = info.resourcePath
const identifierPath = info.identifier
/*
这里要根据实际要调试的文件来修改,一般都是调试vue源码文件;
identifierPath有可能不同,要根据实际来调整,我这里可以使用的
*/
if (/\.vue$/.test(resPath) && identifierPath.startsWith("./src") >= 0) {
return `webpack:///${resPath.replace('./src', 'my-code/src')}`
}
return `webpack:///${resPath}?${info.hash}`
}
}
}
}
我这里分离后,在浏览器中如下图所示