VS Code 如何运行.html文件（VS Code 如何安装插件）（open with live serve和open in default browser）

最新推荐文章于 2024-08-12 08:41:28 发布
最新推荐文章于 2024-08-12 08:41:28 发布
阅读量2.5k 收藏 7
点赞数 5
分类专栏： 前端三剑客 文章标签： visual studio code 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46278037/article/details/113875293
版权
本文介绍了如何安装和使用LiveServer及openinbrowser这两个插件来提升本地HTML文件的预览和访问体验。LiveServer提供了一个本地服务器环境，而openinbrowser则直接打开项目文件，但可能会遇到图片加载问题。通过右键单击.html文件，开发者可以选择不同的方式打开和测试项目，例如以运行合成大西瓜项目为例。
摘要由CSDN通过智能技术生成

安装Live Server

open with live serve，对应的插件是Live Server。是打开本地服务器

在这里插入图片描述

安装open in browser

open in default browser，对应的插件是open in browser。是直接本地打开，访问的是项目保存的电脑地址，会存在图片加载不出来的问题。

在这里插入图片描述
安装完成后，选中.html文件，右键单击，就会出现下列选项：
在这里插入图片描述

以运行合成大西瓜为例：

open in default browser：

在这里插入图片描述

open with live serve

在这里插入图片描述

在这里插入图片描述

BugMiaowu2021
关注
专栏目录
【grafana 】mac端grafana配置的文件 grafana.ini 及login
突围
08-04 275
grafana.ini
Angular 入门教程系列：39：使用ng-alain进行开发
知行合一 止于至善
10-11 5027
在前面的文章中介绍过ng-alain，当时在使用的时候还显得不是很方便，最简单的一个demo运行的都不是非常流畅。而目前的版本已经做有较大的改进，再这个基础上进行二次开发，尤其是一些后端的平台或者监控的平台看起来都比较不错。在这篇文章中继续来确认一下使用的感受。
open with live serve和 open in default brower使用的需要注意路径
ZJC'博客
02-04 553
open with live serve，是打开本地服务器，所以路径书写的时候./和/是没有区别的 open in default brower 是直接本地打开，路径必须是./，否则即/会从根目录下进行读取
vscode-open-in-default-浏览器：在默认浏览器中打开
01-31
在默认浏览器中打开 VSCode扩展，用于在浏览器中快速打开html文件。 支持的功能 在浏览器和编辑器上提供html，xml，pdf文件的“在默认浏览器中打开”菜单，它可以使用默认浏览器打开此文件 您还可以使用快捷键ctrl + 1 （Windows）/ command + 1 （Mac） 支持touchBar（对于Mac） 它基于本地HTTP服务器 支持多国语言： 英文（en） 简体中文（zh-cn） 繁体中文（zh-tw） 日语（ja） 法语（法语） 韩语（ko） 俄文（ru） 葡萄牙语（pt） 土耳其文（tr） 德文（de） 西班牙语（es） 匈牙利文（hu） 义大利文（it） 保加利亚（bg） 设定选项 此扩展为贡献了以下变量： openInDefaultBrowser.run.openWithLocalHttpServer ：（true / false）是否使用本地http服务器打开，默认为true 更新日志 执照
VSCode Live Server 安装与使用教程
最新发布
gitblog_00534的博客
08-12 580
VSCode Live Server 安装与使用教程 vscode-live-serverLaunch a development local Server with live reload feature for static & dynamic pages.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-live-server 1. 项目介绍 VS...
vscode下的open in Browser VS open with live Server
莫逸雪的博客
12-02 2269
open in Browser 对应的插件就是open in Browser open with live Server 对应的插件是 live Server 相同点:都是在浏览器中运行html文件 不同点: 访问地址不同: open in default brower:(访问的是项目保存的电脑地址,会存在图片加载不出来问题) open with live Server: 127.0.0.1 就是localhost webstorm打开是localhost 问题: 利用webpack打包的js文
Visual Studio Code：在操作系统文件夹或文件上出现Open with Code菜单
Azure DevOps Server（原名TFS）
05-26 359
微软公司发布的Visual Studio Code，在软件开发免费、轻量快捷、跨平台等优势，全面支持Windows、MAC OS和Linux，已经受到各类开发人员的喜爱，据传有这样的说法“Code是苹果计算机上最流行的开发工具”；在Windows计算机上，VS Code的流行自然就更不用说了。笔者一直使用Code做一些Nodejs的编码工作，但是最近发现另外一个同事电脑电脑上不能在Windows...
VS Code 右键打开 HTML 的插件 Open in Browser（在浏览器中打开）和 Live Server（实时服务器）
记录个人成长, 分享好用资源
05-16 1399
（在浏览器中打开）和（实时服务器）。
open with live server
weixin_42708742的博客
10-06 349
解决办法：重装CHROME浏览器
vs-code中用liveServer打开vue-cli打包后的html，模拟查看线上路径问题
zzqz的博客
05-13 4718
首先在扩展搜索liveServer下载安装 之后右键html就会出现liveServer命令 我用的vue-cli版本是3.2，为防止路径问题，在vue.config.js中修改publicPath为 module.exports = { publicPath: "./" } 完成重新打包 在vscode 配置 setting.json 中配置liveServer { "live...
angular svg_使用Angular和SVG创建惊人的图表
cunhan4654的博客
08-25 2517
angular svgDownload source code - 1.1 MB 下载源代码1.1 MB 介绍 (Introduction) We've all followed Angular tutorials, and the end result is usually a neatly-formatted "List component" screen showing a list of...
Angular 4入门教程系列：15：NG-ZORRO的使用方式
热门推荐
知行合一 止于至善
11-14 3万+
这篇文章介绍一下Angular的优秀国内UI组件库NG-ZORRO，并演示一下如何使引入NG-ZORRO到项目之中。Why NG-ZORRONG-ZORRO由阿里计算平台事业部、阿里云等不同部门的开发人员在原业务组件的基础上构建而成，于2017/8/15在github上发布了第一个对外的版本0.5.0-rc.0，版本更新很快，三个月已经接近有12次更新之多，基本周发布的快速迭代，目前最新版本为0.6
右击存放项目的文件夹出现 open with Visual Studio Code 的打开方式
qq_43532275的博客
04-19 956
最终效果： 步骤1： 找到Visual Studio Code 的安装位置 （右击桌面Visual Studio Code 图标——》属性——》打开文件夹所在位置） 新建一个可以编辑的 content.txt 文件 复制以下代码 （标黄部分改成自己的安装地址） Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\VSCode] ;右击文件时弹出的菜单 @="Edit with Visual Studi...
在vscode中安装“Open in browser”和“Open in Default Browser”插件
听海边涛声
04-22 1522
在vscode中安装“Open in browser”和“Open in Default Browser”插件
Vscode 更改 open in default browser
AdamShyly的博客
08-30 573
在设置中搜索 “browser”，找到下图红框设置，需要手动输入对应的浏览器名称（edge或者chrome）
VSCode解决设置默认浏览器方法（open with live server）
Fantasc的博客
08-09 6606
这个设置之后和open in browser的选线不一样，使用open in browser打开浏览器看效果的话每次修改代码都需要刷新网页才会生效，但是如果使用open with live server查看网页效果，所编写的代码只需保存即可在浏览器中看见实时效果。 VS Code中修改open with live server默认浏览器的方式如下：        点击设置–>在搜索栏输入“open in browser:defaul
vsCode中代码保存自动刷新页面，open with live server，可修改打开浏览器
编程界明世隐的博客
03-15 1万+
前言 在我们使用vscode写代码的时候，每次修改都要先保存，再刷新浏览器才能看到代码变动后的效果，如果只要保存，浏览器会自动刷新岂不是更好，下面这种方法就可以做到。 插件市场安装live server插件 打开文件 在编辑的html页面，右键 --> open with live server。 看浏览器 直接修改内容，不需要去浏览器刷新，保存即可自动刷新（比如后面加123） 如果live server 插件打开不是谷歌浏览器，也可以修改 打开设置 => 工作区
关于VSCode如何设置Live Server默认浏览器（Open with Live Server）
weixin_42793577的博客
03-12 1416
Open with Live Server如何设置默认浏览器 1.文件->首选项->设置 2.搜索 “live” ，找到 “Live Server › Settings: Custom Browser”
VSCode点击“Open In Default Browser”提示错误信息“Open browser failed!! ...”
tears_of_Themis的博客
04-21 2564
VSCode点击“Open In Default Browser”时，提示报错信息“Open browser failed!! Please check if you have installed the browser chrome correctly!”
如何在vs code中运行.html以及.css和.js文件
07-09
1. 安装插件：在VS Code的扩展市场中搜索并安装名为"Live Server"的插件。这个插件可以为你提供一个本地开发服务器，方便在浏览器中实时预览你的网页。 2. 打开文件：在VS Code中打开你的HTML文件。 3. 右键点击...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BugMiaowu2021

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值