VSCode中如何调试Vue代码?-VSCode-立业阁教程

# 热门
VSCode中如何调试Vue代码?-VSCode-立业阁教程

2021-06-29 23:29:23

# 热门
VSCode中如何调试Vue代码?-VSCode-立业阁教程

VSCode中如何调试Vue代码?下面本篇文章给大家介绍一下在VS Code 中调试Vue.js的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

相关推荐:《vscode教程》

步骤

  • 打开vscode,安装Debugger for Chrome
  • 使用vue cli3创建vue应用
  • 项目根路径添加"vue.config.js" 文件
module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}
  • .vscode文件中的launch.json添加:
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}
  • 设置一个断点
  • 在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用:
    npm run serve
  • 来到 Debug 视图,选择“vuejs:chrome/firefox”配置,然后按 F5 或点击那个绿色的 play 按钮。

1.png

  • 随着一个新的浏览器实例打开 http://localhost:8080,你的断点现在应该被命中了

更多编程相关知识,请访问:编程课程!!

以上就是VSCode中如何调试Vue代码?的详细内容,更多请关注立业阁其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 ( 0 )

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!276087365
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

立业阁 其他cms教程 VSCode中如何调试Vue代码?-VSCode-立业阁教程 https://www.liyege/xue/10516.html

永远为用户服务的草根站长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

网站定制