vscode通过服务器打开html文件

转载 已于 2023-06-26 12:53:03 修改 · 1.2k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://www.cnblogs.com/luzhanshi/p/11994839.html
标签
#html #vscode
于 2023-06-26 07:59:06 首次发布
文章介绍了LiveServer插件的下载和使用方法，包括通过右键菜单快速打开HTML文件，以及如何设置和修改服务器的端口，特别提到了端口冲突时插件会自动寻找可用端口的功能。
该文章已生成可运行项目，

一、下载插件：Live Server

在这里插入图片描述

二、Open with Live Server

安装完成之后直接在html上右键，点Open with Live Server即可
在这里插入图片描述

三、修改端口

可能会发现默认是5500端口，那么万一端口冲突呢，或者我们需要自己设置端口呢，接下来就简单介绍下如何设置服务器的端口和代理。当然如果端口冲突，插件会自动启动其他端口的，这个大家不必担心，放心使用即可
在这里插入图片描述

搜索关键字【liveServer】一直往下找，我们可以找到live Server相关设置：

liveServer.settings.port 是设置端口的
在这里插入图片描述

保存之后再次打开html文件即可

四、转载自

https://www.cnblogs.com/luzhanshi/p/11994839.html

本文章已经生成可运行项目
VScode编写html利用live Server扩展在浏览器无法打开 解决方法如下
haimingjavazhilv的博客
03-23 2997
VScode编写html利用live Server扩展在浏览器无法打开 1.
vscode 实现本地服务器部署小结
sinat_33255495的博客
05-09 1360
在查阅 MDN 网站的时候，偶然发现的原来 vscode 也可以实现本地化服务器部署，来模拟服务器的运行。
vscode如何创建并打开html文件（骨灰级新手友好）
m0_65163985的博客
04-12 1万+
open in browser要下载1.1.0版本，但是会发现只能找到2.2.0的，所以我们这样做。填上一个你已经安装好的浏览器， 我这里填的是火狐，你填其它的也可以。(简体中文)，重启后发现就变成中文（对于原来是英文版的小伙伴）1. 先打开Visual Studio Code。最后在空白处点击鼠标右键， 然后选择。2. 下载三个插件 ，点击第五个图标。选择1.1.0版本的安装即可。然后配置你要打开在哪个浏览器。设置放置的位置后就可以得到。然后右击鼠标，点击“右键鼠标 -> 点击。
如何在VSCode中将html文件打开到浏览器
欢迎您的莅临，感谢您的阅读。
08-22 1万+
近期在学习前端内容，遇到了这个问题，来总结记录并分享一下。html文件一般可右击选择打开方式，通过浏览器打开我平时用idea也可以直接在右上角点击浏览器按钮打开（这也是我想用idea来写html的原因）但大家都在用VSCode，所以肯定有它的强大之处，不然也不会这么受欢迎。在vscode中，想要将html文件打开到浏览器有两种方式，一个是debug模式一个是下载插件。接下来就看以下这两种方式。
vscode文件在浏览器中打开？
dayu064747的专栏
06-04 488
1.安装插件open in browser 2.右键，选择打开默认浏览器或其他浏览器 　　默认浏览器： alt + b 　　其他浏览器： alt + shift + b 转载于:https://www.cnblogs.com/wangxiong-1004/p/9133357.html...
【VScode】VSCode前端文件（html文件）如何以服务器模式打开
姜太小白的博客
05-09 1322
方法1： VSCode前端文件（html文件）如何以服务器模式打开？ 比如工程下有一个A.html文件，想在VSCode里面直接操作，就想Webstorm一样，以http://localhost/xxx/xx/xx/A.html这样的形式在浏览器中访问。 发现只有一个 View In Browser 插件，但是并不是这样的形式，求大神解答？ npm install http-server -g 在项目目录打开终端输入 hs 就可以启动web服务器了，很简洁 方法2： VScod..
VSCode前端文件（html文件）以服务器模式在chrome浏览器打开
weixin_37676959的博客
10-28 4877
一、前端文件（html文件）以服务器模式打开 1.VScode安装Live Server 插件 2.打开 二、Live Server 插件配置默认打开浏览器为chrome 1.点击插件旁白的配置按钮 2.在展开也选择“配置扩展信息” 3.设置live server默认打开浏览器为“chrome” 此时，选中.html文件，右键选择"open with Live Serve...
VSCode前端文件（html文件）如何以服务器模式打开？
weixin_33923762的博客
04-18 8060
方法1： VSCode前端文件（html文件）如何以服务器模式打开？比如工程下有一个A.html文件，想在VSCode里面直接操作，就想Webstorm一样，以http://localhost/xxx/xx/xx/A.html这样的形式在浏览器中访问。发现只有一个View In Browser插件，但是并不是这样的形式，求大神解答？ npm install http-server -...
【已解决】如何设置Vscode打开html文件使用http协议？而不是File协议？
qq_43586999的博客
05-08 2655
下面此种方式是我刚刚使用vscode的常用打开方式，但是在使用Axios的时候就会出现一些问题【问题如下】。好像是跨域的问题。 但是使用idea执行一样的代码，就可以得到结果。 仔细一看，是两者访问的方式不一样，一个是http协议，一个是以file协议打开的。 要想使Vscode通过服务器打开html文件，走http协议，需要： 1.下载Live Server 2.安装完成后鼠标右键html文件空白处，点击Open with Live Server 即可。 参考博客：[https://www.cnb
在VScode里打开.html文件的方法
m0_74283019的博客
10-24 3088
VScode版本信息：版本: 1.76.2 (user setup)提交: ee2b180d582a7f601fa6ecfdad8d9fd269ab1884日期: 2023-03-14T17:55:54.936Z沙盒化: No(1) 打开VScode首页，点击左边的扩展图标（或者快捷键Ctrl + Shift + X）。（2）在搜索框中输入，然后找到并安装这个扩展。
vscode+live server——更改端口号——基础积累
yehaocheng520的博客
02-07 1万+
vscode+live server——更改端口号——基础积累
VScode如何在浏览器中打开html文件
qq_34497319的博客
07-30 2654
1.新建一个html文件(!+回车/html:5) 2.在编辑器左侧找到扩展(Extensions),点击扩展 快捷键(Ctrl+Shift+X) 3.在点开的扩展输入框中输入open in browser，找到open in browser这款插件，点击右下角的Install安装 4.Alt+B默认浏览器打开 5.Shift+Alt+B选择其他浏览器 ...
用VSCode运行调试html
晨之清风
09-25 4786
用VSCode运行调试html
如何安装nodejs、webpack
qq_42449963的博客
09-27 1万+
前言： 我在b站上面学习Vue的时候需要使用webpack进行模块化，那就安装webpack，老师说由于webpack需要nodejs的支持，所以我们还需安装nodejs，所以我就先安装nodejs，然后在安装webpack 第一步：安装nodejs 下载： 老师上面nodejs的版本是10.13.0，所以我也安装该版本，在nodejs官网上面是最新的12.8.4，这不符合我的要求，于是我找到了所有nodejs历史版本的链接（https://nodejs.org/dist/），由于我本次使用的nodejs版
使用visual studio code编译html文件不能打开 显示8080端口被占用，麻烦讲解一下怎么正常驱动文件...
weixin_42588672的博客
12-25 905
如果您使用 Visual Studio Code 编译 HTML 文件时出现 "8080 端口被占用" 的错误，这意味着当前系统中可能已经有一个程序在使用 8080 端口。这可能是由于您已经在运行另一个 Web 服务器(如 Apache 或 IIS)或者其他程序(如 Skype)，它们也使用了 8080 端口。 要解决这个问题，您需要做的第一件事就是确定哪个程序正在使用 8080 端口。您可以使用...
如何使用VS Code 建立并运行HTML文件（超详细，新手入内）？-VS Code 编辑器的使用
热门推荐
在森林里麋了鹿
04-04 13万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、打开VS Code 配置插件二、建立运行HTML文件1.选择文件夹2.建立HTML文件3.运行HTML文件 前言 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，它的特点免费、开源、多平台，以及集成git，代码调试，插件丰富等有点，被大家逐渐熟知和认可。但是如何在VS Code中建立运行html文件呢？详见如下内容 一、打开VS Code 配置插件 首
vscode打开html
zhengxiao111的博客
03-13 627
vscode使用技巧，如何通过open in browser ，liver server打开html。
解决vscode插件Live Server默认端口号无法修改的问题
weixin_46166330的博客
10-31 3972
首先你先看看你的工作区有没有一个.vscode的文件夹，点开以后有一个setting.json的文件，没错就是它，点进去修改就OK了；但如果你发现你确实修改了，但是重新运行时依然还是原来的端口号，或者更甚的，一开始就直接不是5500，可能是5501、5502等等，先随便运行一个html文件，注意看右下角的数字，如果是5500，那么很大可能是默认的，很容易修改。找到这个以后，点进去，就可以改为你想要的，在重新运行html文件，你就可以看到修改成功了。先在你的扩展里找到Live Server插件=>扩展设置。
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-25 1万+
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
详细教程:如何在vs code里面给普通的HTML搭建局域网服务器给其他设备访问
最新发布
weixin_56334307的博客
05-06 1786
在开始搭建 VS Code 服务器之前，请确保你已经在电脑上安装好了 VS Code 软件。如果尚未安装，可以前往 VS Code 官方网站（）下载对应系统版本的安装包，并按照安装向导完成安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值