VS Code——Live Server的简介、安装与使用

news/2025/12/9 14:51:44/文章来源:https://www.cnblogs.com/smile-fanyin/p/19326639

基本概念：

Live Server：一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

安装

一、在VS Code扩展中搜索Live Server，并安装

3ab2f646460f0e419008069c1a054a58

二、打开命令面板，输入settings，点击首选项

2c0f45b101b8650c7b0e3c9f20937203

三、搜索Live Server配置项，将左侧需要修改的配置项复制到右侧用户设置并修改

56672503832346438eed4d3abe41edb9

Live Server的配置

{
"liveServer.settings.port": 8080, //设置本地服务的端口号
"liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//设置忽略的文件".vscode/**","**/*.scss","**/*.sass"
]
}

使用

设置完毕后，重启vscode，并选择需要浏览的文件，右键开启服务

e21207396c1d4dbeb6ff8b80b91735bc

其他开启方法：

1、在窗口的最底部有Go Live可以点击，一旦点击，就会自动在浏览器中打开HTML文件

2、快捷键

　　(alt+L, O) 打开服务

　　(alt+L, C) 关闭服务

3、按F1,然后在输入栏中输入

　　Live Server: Open Live Server to start a server 打开服务，

　　或者 Live Server: Close Live Server to stop a server 关闭服务

可以在浏览器中浏览网页

并且在VS Code保存，浏览器即可自动刷新

02fd059c5d69178864ee89529f6e76ce