vscode使用F5启动vue项目调试

最新推荐文章于 2024-08-08 13:31:47 发布
最新推荐文章于 2024-08-08 13:31:47 发布
阅读量2.1k 收藏 4
点赞数 2
分类专栏： Tips 文章标签： vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41790461/article/details/120174418
版权
本文介绍了如何在VSCode中创建launch.json，以简化Node.js项目的调试流程，通过删除不必要的配置并自定义运行命令，提升开发效率。重点在于添加launch.json文件、修改runtimeArgs和runtimeExecutable，最终实现F5快捷启动项目调试，并提到了.gitignore的使用注意事项。
摘要由CSDN通过智能技术生成

完成该配置在启动调试时就无须在终端敲npm命令或者找package.json文件去点击script上的三角按钮了，非常方便

在debug项添加launch.json文件

在这里插入图片描述

选择Node.js环境

在这里插入图片描述

删除program配置

这个是启动项目识别的入口文件，默认把当前聚焦的文件作为入口，项目整体启动调试的话不需要该配置
在这里插入图片描述

添加运行命令与执行器配置

可以通过修改命令配置使F5自动运行其他脚本，如 npm run serve

"runtimeArgs": [
                "run",
                "dev"
            ],
"runtimeExecutable": "npm",

在这里插入图片描述

此时配置完成，可体验F5一键启动项目调试

多出.vscode目录，提交上库

此时工程根目录下会多出.vscode目录，launch.json文件就在该目录下，将配置提交上库
在这里插入图片描述

在gitignore中添加.vscode忽略，防止误改覆盖

在这里插入图片描述

兴趣使然的码仔
关注
专栏目录
使用Vscode调试vue代码
Nie2014的博客
06-19 5770
如何在 VS Code 中调试浏览器中运行的通过 Vue CLI 生成的 Vue.js 应用程序官网解释 先决条件 安装了 VS Code 安装扩展 Debugger for Chrome Debugger for Firefox 修改vscode配置 1、修改config/index.js 使用 Vue CLI 2 打开 config/index.js 并找到 devtool property。将其更新为： devtool: 'source-map', 使用 Vue CLI 3 请设置并更
vscode如何打断点调试vue
u013994400的博客
03-30 3871
1：安装Debugger for Chrome插件 2：配置launch.json文件 "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "webRoot": "${workspace
VS Code配置F5一键运行Vue应用（npm run serve）
大道至简
01-10 9775
VsCode能否一键运行程序？比如按下F5，直接运行npm run serve； 答案是可以！！！ 请往下看。
深入讲解 VsCode 各场景 高级调试 与 使用技巧
最新发布
2401_83384536的博客
08-08 988
数据面板可以查看所有变量在变量上点击右键，可以设置变量值、复制变量值等操作聚焦于数据面板时，可以通过键入值来搜索过滤。点击下图所示按钮可以控制是否筛选。可以将变量添加到监听面板，实时观察变量的变化。在变量面板通过右键选择“添加到监视”将变量添加到监听面板也可以直接在监听面板选择添加按钮进行变量添加添加变量后就可以实时监听变量的变化。
vscode怎么配置python运行环境f5_VScode下Python无法F5代码
weixin_32081489的博客
02-22 2199
满意答案smovr2013.11.12采纳率：40%等级：8已帮助：58人运行python代码运行python代码的常见方式有三种：运行python命令，进入python工作环境，输入表达式后回车即可创建保护python代码的文件，使用命令 python filename [参数]执行在Linux下首行注释#!/usr/bin/env python3，然后将源文件加上执行属性即可直接执行使...
VSCode打开已有vuejs项目
热门推荐
Yoryky的专栏
10-19 5万+
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选
vue 实现当前页F11全屏和F5刷新（“provide / inject”）的功能
让心在跳动
06-11 3802
provide/inject介绍 provide / inject：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 provide ：选项应该是：一个对象或返回一个对象的函数 inject：选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名 vue官网对provide-inject介绍：https://cn.vuejs.org/v2/api/#provide-inject 示例 在父组件中注册， 通
[转]Vue Cli3 + VS Code 愉快调试
mao_mao37的博客
06-01 2233
1. 设置vue.config.js以便能够准确命中断点 module.exports = { configureWebpack: { devtool: 'source-map' } } 2. 打开调试配置文件launch.json, 添加或修改以下配置： { // Use IntelliSense to learn about possible attribute...
VSCode配置远程调试Linux
Lawliet_Ma的博客
03-13 623
VSCode配置远程调试Liunux
vscode 调试参数_使用vscode调试你的node应用
weixin_42348026的博客
12-29 1690
都9102年了, 你的nodejs应用还在用console调试吗?从一开始使用 webstorm 内置的 debug 功能, 到使用node-inspector库进行调试顺便脱离 webstorm 的笨重, 再后来 nodejs 内置了debugger 模块也可以帮助调试我们的应用.目前个人使用 vscode 进行日常开发, 本文主要介绍 vscode 平台的 debugger 调试功能.vsco...
VS Code 调试 Vue 项目 （Edge、Chrome、FireFox）
meazin
02-04 6526
一、安装调试器 Debugger for Microsoft Edge Debugger for Chrome Debugger for FireFox 二、配置 lanuch.json { "version": "0.2.0", "configurations": [ { "type": "edge", "request": "launch", "name": "vue:edge", // 此项配置的名字，显示在调试页的配置选择下拉框中
vue f5刷新路由 iview中菜单刷新不变 刷新页面菜单高亮不变 vue刷新store数据丢失 IOS刷新store丢失
Taurus_666
07-17 1205
遇到的问题 在后台管理系统中，菜单是基本的组成部分，ui框架也很多，看起来也都很完美， 但是， 第一：刷新后菜单恢复到初始的样子； 第二：刷新后store数据消失，页面无法加载 解决思路 通过多种尝试，最终我选择了利用事件监听，增加缓存来实现，目前视觉效果还是可以的； 第一：菜单问题解决 1、可以在生命周期created中通过监听beforeunload事件， 2、将当前打开的一级和二级菜单保存一...
vscode运行Python失败：F5无法运行程序和设置断点debug
专注于计算机视觉、目标检测、目标跟踪、分割、分类等方向
02-06 2763
经常遇到这个问题，特记录解决方法，供后续遇到同样问题时查阅。
vue+springboot前后端分离项目部署到windows服务器全部流程
qq_43228403的博客
02-25 8420
vue+springboot前后端分离项目部署到windows服务器 最近看了若依的前后端分离的vue项目，代码撸了一遍之后想要将服务器和前端打包部署到本地windows中，记录自己的部署 一，后端部署 目录结构： 项目工程下的pom文件是整个项目的父pom工程文件，其他的模块pom中都会声明parent文件是pom.xml并且pom.xml中有定义了工程中的所有module 1.1给多模块项目打jar包 此项目后端使用的springboot + maven的技术栈 并且在admin.pom中配置
【最新】使用VSCode调试【Vue、React】前端项目的最佳解决方案
weixin_42117463的博客
03-05 1606
使用VSCode调试【Vue、React】前端项目的最佳解决方案 2步搞定
VsCode 各场景高级调试技巧！
静觅
11-16 5468
这是「进击的Coder」的第 753篇技术分享作者：愣锤来源：https://juejin.cn/post/7071146744339234846“ 阅读本文大概需要 23 分钟。 ”VsCode 自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握 VsCode 的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图...
vscode 快捷启动vue项目
m0_49440146的博客
06-01 4832
1.选择终端2. 选择配置任务3. 选择启动命令4. 会在项目根目录生成一个tasks.json文件，里面的内容就是刚选中启动命令自动生成的代码(不用去管它)5. 现在每次就可以直接在终端选择运行任务选择前面选择的命令点击，vscode就会自动帮你运行npm run dev 启动项目
使用vscode运行vue项目
洋葱专栏-有灵魂的程序员
02-01 2万+
！！学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。！！文章参考：https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html&https://www.jianshu.com/p/80ae9b1b8fae 【如果你和我一样是菜鸟的话，点进来的时候不要被文章长度吓到了，因为我写的特别详细所以看起来篇幅比较长，加上截图比较庞大。我怀疑之前由于截图较小 博客没自动给我加水印，导致文章发不出去，咱就是怀疑，咱也...
VSCode运行Vue项目设置一键运行
qq_45747841的博客
06-02 1473
点击:运行>添加配置 弹出该界面，点击Node.js(需提前安装Node) 传到该界面 更改为相应浏览器Chrome/firefox { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webR
vscode运行vue项目
07-14
要在VSCode中运行Vue项目，需要进行以下配置： 1. 安装Vue CLI：可以通过npm安装Vue CLI，命令为：npm install -g @vue/cli 2. 创建Vue项目：在命令行中输入vue create <project-name>，创建一个Vue项目。 3. 安装Vue插件：在VSCode中安装Vue插件，例如：Vue 2 Snippets、Vetur等。 4. 配置调试器：在VSCode中配置调试器，可以使用Vue CLI提供的调试器配置，也可以自己配置。 5. 运行项目：在VSCode中打开Vue项目文件夹，按下F5键或者点击调试按钮，即可运行Vue项目。 需要注意的是，运行Vue项目前需要先启动开发服务器，可以使用命令npm run serve启动开发服务器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值