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

相关推荐
海底火旺6 分钟前
单例模式的实现
前端·javascript·设计模式
FinelyYang6 分钟前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app
3Katrina8 分钟前
《JavaScript单例模式详解:从原理到实践》
前端·javascript·设计模式
浩星9 分钟前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin11 分钟前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
在钱塘江12 分钟前
《你不知道的JavaScript-上卷》第二部分-this和对象原型-笔记-5-原型
前端·javascript
中微子13 分钟前
JavaScript 中的单例模式(Singleton Pattern)
javascript
前端开发爱好者16 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
加油乐39 分钟前
js及vue主题切换方案
前端·javascript·vue.js
KeyNG_Jykxg1 小时前
🥳Elx开源升级:XMarkdown 组件加入、Storybook 预览体验升级
前端·vue.js·人工智能