注意:URL中的端口号要跟WEBPACK配置的启动端口号一致。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
4.修改 webpack 配置
如果是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改:
1.打开根目录下的 config 目录下的 index.js 文件
2.将dev 节点下的 devtool 值改为 'eval-source-map'
3.将dev节点下的 cacheBusting 值改为 false
5.开启调试
上述配置完成之后:
1. 通过第一步的方式以远程调试打开的方式打开 Chrome
2. 在 vue 项目中执行 npm run dev 以调试方式启动项目
3. 点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。
现在就可以在 vue 文件的 js 代码中打断点进行调试了。
以上就是vscode如何调试vue的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vsCode》频道 >>