温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html怎么加载live server插件

发布时间:2022-02-22 14:57:49 来源:亿速云 阅读:369 作者:iii 栏目:开发技术

这篇文章主要介绍“html怎么加载live server插件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html怎么加载live server插件”文章能帮助大家解决问题。

Live Server介绍

Live Server 是一个具有实时加载功能的小型服务器,使用它进行 web 页面开发就好像在服务器上修改页面一样。同时它因为具有实时加载功能,代码修改后页面会进行实时刷新,可以直观的看到网页的修改效果。

安装

在插件市场搜索 Live Server,点击安装即可。

使用

Live Server 不能加载单个页面,只能加载文件夹。可以新建一个文件夹,然后用 VSCode 打开这个文件夹。就快要在这个文件夹内进行web页面的开发了。

在写完代码需要查看效果的时候,可以使用以下几种方式运行 Live Server:

右下角状态栏有一个 Go Live 按钮,点击即可运行(启动后这个按钮会变成 port:5500,这说明服务器部署在 localhost:5500 的端口下,再次点击这个按钮可以停止运行。此外也可以直接在浏览器通过访问 localhost:5500 来查看网页)。

在资源管理器右击对应的 html 文件后会出现如下右键菜单,open with Live Server 也可以启动服务器(也可以使用指令进行执行)。

在代码文件中右击,可以看到如下弹出菜单,与上一种方法相似,可以找到启动服务器的功能。不同的是,这个菜单还提供 Stop Live Server 的按钮,使用后可以关闭服务器(也可使用指令执行)。

注;可以同时启动多个 Live Server,因此,端口号并不是固定的,但一般都是 5500 端口。另外,这个端口号可以设置,在 VSCode 配置文件中可以设置这个端口号,此处不多做深入介绍。

需要注意的坑:

在使用 Live Server 开发页面的时候需要特别关注 html 与 css 中引用路径的问题。有些时候引用路径出现一些错误的时候,如果使用本地打开的方式会打开失败,而 Live Server 有时候会忽视这种错误(能成功打开)。这并不是 Live Server 的问题,而是开发者自己的问题。所以在使用 Live Server 开发完代码后,最好使用本地打开方式预览一下页面展示效果。

关于“html怎么加载live server插件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI