两步搞定Vue项目在VScode里使用调试

由于Webpack编译压缩机制导致的代码混淆，使得无法直观的定位问题。

第一步：配置项目里vue.config.js

module.exports = { 
    configureWebpack: { 
        devtool: 'source-map' 
    } 
}

解释：devtool: 'source-map' 指定如何生成源映射。源映射是一种将编译后的代码映射回原始源代码的技术，这对于调试是非常有用的，因为它可以让开发者看到执行的是原始代码而非转换过后的代码。

第二步：Vscode选择调试

【1】

【2】

【3】 VScode打开调试会自动生成此项配置文件，仅需修改一项，url配置修改为本地项目运行的IP "url": "http://localhost:8012"

配置资料： Vue文档链接：Debugging in VS Code — Vue.js (vuejs.org)

【4】

启动以后即可在Vscode打断点，浏览器F12控制台选择：sources-左侧webpack的下面代码文件是没有编译后的源码。