首先需要在 VSCode 中安装 Debugger for Chrome 插件
下载 Chrome debugger
然后在 debug 配置中添加如下配置
配置调试器
配置代码
- {
- "type": "chrome",
- "request": "launch",
- "name": "vuejs: chrome",
- "url": "http://localhost:8080", // 改成自己的端口就行
- "webRoot": "${workspaceFolder}/src",
- "breakOnLoad": true,
- "sourceMapPathOverrides": {
- "webpack:///src/*": "${webRoot}/*"
- }
- }
webpack 的配置
使用 vue-cli3 的话, 在 vue.config.JS 中 configureWebpack 项中添加以下两个配置
- configureWebpack: {
- devtool: 'source-map',// 保证源码正确加载
- },
使用其他的方式构建项目, 在 conf/index.JS 中修改
将 devtool: 'cheap-module-eval-source-map'修改为 devtool: 'source-map'
来源: http://www.jianshu.com/p/af4b2e4ae11a