vscode内嵌浏览器实时预览vue项目

安装插件 web Preview

启动vue项目

打开预览

ctrl + shift + p 之后输入并选择 Open Web Preview

即可看到预览窗口,但此时明明我的页面是有内容的,但是窗口却空白的。

因为默认访问端口是3000,我们将其修改为vue项目默认的5173端口即可。

点击一下预览窗口可以看到预览工具栏:

再点击一下搜索,发现此时端口是3000,改为5173

回车发现预览窗口有内容了:

后面修改vue文件之后ctrl+s保存可以立即预览结果了~

配置默认端口

按照上面的步骤可以达到目的了,但是每次打开预览时都要改端口比较麻烦,为此我们直接改一下配置文件

ctrl + shift + p 之后输入setting关键字选择用户配置json文件

增加一行并保存文件

复制代码
"webPreview.url": "http://localhost:5173"

后续重新打开预览窗口自动访问5173端口了,搞定!

相关推荐
米米商聊8 小时前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
kyriewen11 小时前
我把 10 道面试题答案真跑了一遍:6 道是错的
前端·javascript·面试
WebInfra12 小时前
Rspack 2.3 发布:联手 SWC 团队带来全新编译器
前端·javascript·github
FRing0313 小时前
JavaScript入门到精通三十一(原型继承、原型链)
开发语言·前端·javascript
程序员大阳13 小时前
副队长JavaScript教程(52)-DOM操作元素的内容
javascript·dom·innertext·innerhtml·value·内容操作
裕波15 小时前
苏千|从 cnpm 到 Vite+:AI 时代的开发者体验演进
javascript
console.log('npc')15 小时前
周期任务功能完整实现:CRON 编辑器 + 模板变量 + 执行历史
javascript·vue.js·编辑器
程序员大阳15 小时前
副队长JavaScript教程(58)-基于DOM的网页留言板开发
javascript·实例·dom·案例·留言板
迪菲赫尔曼15 小时前
【基础篇 08】让VS Code连接服务器:界面在本地,文件保存到远端
运维·服务器·vscode·yolo·论文·教程·ultralyt
咚咚咚小柒15 小时前
【前端】LangChain.js学习
前端·javascript·人工智能·typescript·langchain·vue·ai编程