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端口了,搞定!

相关推荐
silence_xiang28 分钟前
【React】首页悬浮球实现,点击出现悬浮框
前端·javascript·react.js
隔壁的大叔1 小时前
由于vite版本不一致,导致vue组件引入报错
javascript·vue.js
超级罗伯特1 小时前
大屏自适应,响应式布局,亲测有效
前端·javascript·html·大屏·驾驶舱
青衫码上行1 小时前
【Java Web学习 | 第九篇】JavaScript(3) 数组+函数
java·开发语言·前端·javascript·学习
我是ed.1 小时前
vue2 使用 cesium 展示 TLE 星历数据
vue.js·cesium
前端Hardy1 小时前
HTML&CSS&JS:赛博木鱼
前端·javascript·css
有点笨的蛋1 小时前
从值拷贝到深拷贝:彻底弄懂 JavaScript 的堆与栈
前端·javascript
有点笨的蛋1 小时前
从零掌握 Ajax:一次请求带你读懂异步数据加载原理
前端·javascript·ajax
进击的野人1 小时前
JavaScript日期操作与DOM节点管理:构建动态网页的核心技术
前端·javascript
AAA简单玩转程序设计2 小时前
JS防抖:别再让按钮“手抖”连点了!
前端·javascript·html