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

相关推荐
我的心巴4 分钟前
Vue2 ElementUI Tree 拖动目标节点能否被放置及获取放置位置
前端·vue.js·elementui
jqq6661 小时前
解析ElementPlus打包源码
前端·javascript·vue.js
乐予吕1 小时前
Promise 深度解析:从原理到实战
前端·javascript·promise
P7Dreamer1 小时前
优雅封装:Vue3 + Element Plus 智能紧凑型搜索组件开发实践
前端·javascript
Beginner x_u1 小时前
[AJAX 实战] 图书管理系统下 编辑图书
前端·javascript·ajax·bootstrap
tager1 小时前
还在为跨框架的微信表情包烦恼?我写了个通用的,拿去吧!🚀
前端·vue.js·react.js
前端小巷子2 小时前
跨标签页通信(七):postMessage
前端·javascript·面试
秋水丶秋水2 小时前
三分钟搭建Java编译环境
前端·javascript
wangqianqjl2 小时前
vscode连接不上服务器问题修复
服务器·ide·vscode
duanyuehuan3 小时前
Vue 组件定义方式的区别
前端·javascript·vue.js