live-server安装与使用

本文介绍了如何使用live-server作为实时加载服务器进行前端项目的开发,包括html、css和javascript的实时预览。通过简单安装和配置,即可在本地环境下快速查看项目变化,提高开发效率。

原文链接:https://www.jianshu.com/p/6661aaebf412

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

 

npm install -g live-server

然后在所在项目目录下,打开命令行工具,输入 live-server,回车就可以了(注意这里默认打开的是index.html)。

 

image.png

接着就会看到打开了一个127.0.0.1:8080的网页,可以看到效果。

 

image.png

 

默认端口号是8080,如果想用其他端口号可以在运行live-server的时候用--port的方式指定端口号。

 

live-server --port 9000

 

### live-server 使用教程 `live-server` 是一款轻量级的开发服务器工具,主要用于前端开发者实时预览 HTML 页面的变化。以下是关于 `live-server` 的使用方法及相关参数介绍。 #### 安装 live-server 为了使用 `live-server`,需要先安装 Node.js 和 npm 工具。通过以下命令可以在全球范围内安装 `live-server`: ```bash npm install -g live-server ``` 此命令会将 `live-server` 添加到系统的全局环境中,使其可以直接在任何地方调用[^2]。 #### 启动 live-server 启动 `live-server` 非常简单,在目标 HTML 文件所在的目录下打开命令行终端并执行以下命令: ```bash live-server ``` 默认情况下,`live-server` 将监听端口 **8080** 并自动打开浏览器窗口显示当前目录下的索引页面(通常是 `index.html`)。如果需要指定其他端口,则可以通过如下方式实现: ```bash live-server --port=9090 ``` 上述命令将会把服务绑定到 **9090** 端口上运行。 #### 常见参数 除了基本的功能外,`live-server` 还支持多种实用选项来满足不同场景的需求。下面列举了一些常用参数及其作用: - `--port=[number]`: 设置自定义端口号。 - `--host=[hostname]`: 修改主机名,默认为本地环回地址 (`localhost`)。 - `--entry-file=[filename]`: 指定入口文件名称,而非默认寻找 `index.html`。 - `--no-browser`: 不自动弹出浏览器窗口。 - `--open=[url]`: 打开特定 URL 而不是根路径。 - `--watch=[path]`: 只监控某些特定路径中的更改。 - `--ignore=[pattern]`: 排除不需要监视的文件模式。 例如,仅希望观察 CSS 文件变化而不重新加载整个页面时可这样操作: ```bash live-server --watch="*.css" ``` #### 解决常见错误 当遇到 `"live-server" 不是内部或外部命令` 类型的问题时,通常是因为未正确配置环境变量所致。按照以下步骤排查问题: 1. 确认已成功安装 Node.js 和 npm; 2. 检查是否能正常运行 `node -v` 来验证版本号; 3. 如果仍然无法识别 `live-server`,尝试重新设置 node_global 的路径加入 PATH 中[^4]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值