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

相关推荐
weixin_4266892035 分钟前
vscode C语言编译环境搭建(单个文件)
c语言·ide·vscode
竹林8182 小时前
在Web3前端用Node.js子进程批量校验钱包,我踩了这些性能与安全的坑
javascript·node.js
Kel4 小时前
深入剖析 openai-node 源码:一个工业级 TypeScript SDK 的架构之美
javascript·人工智能·架构
SuperEugene5 小时前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
Luna-player5 小时前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js
敲代码的约德尔人5 小时前
JavaScript 设计模式完全指南
javascript·设计模式
angerdream5 小时前
最新版vue3+TypeScript开发入门到实战教程之Vue3详解props
javascript·vue.js
~欲买桂花同载酒~6 小时前
项目优化-vite打包优化
前端·javascript·vue.js
BestOrNothing_20156 小时前
Ubuntu 22.04 下调整 VS Code 界面及字体教程
linux·vscode·ubuntu22.04·界面调整