live-server的用法

最新推荐文章于 2025-06-30 14:16:19 发布
原创 最新推荐文章于 2025-06-30 14:16:19 发布 · 1w 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过live-server工具实现前端项目的实时刷新。主要包括：1) 使用npm全局安装live-server；2) 在项目根目录创建index.html并启动live-server；3) 修改默认端口及运行命令。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在前端开发的过程中，有时候希望页面实时刷新，这时候就可以用到live-server

1.安装

npm install -g live-server

2.根目录下建立一个index.html

执行live-server

3.默认端口为8080，如果需要修改在package.json的"scripts"增加

"server":"live-server ./ --port=8090"

4.运行

npm run server

VSCode Live Server 插件安装和使用
呆萌很的博客
01-08 5474
VSCode Live Server 插件安装和使用
live server 的使用
lionheart922的专栏
04-12 2144
为什么要装 因为在本地跑 javascript的时候遇到了如上的错误，from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. 只有在本地搭建一个server才能解决 安装Live Server..
live Server的使用
m0_52244931的博客
09-19 2369
live Server的使用
live server插件vscode的配置
最新发布
Yqha1的博客
06-30 1086
本文详细介绍了如何在VS Code中配置和使用Live Server插件。主要内容包括：1）安装步骤；2）两种启动服务器的方法；3）个性化配置详解（端口、根目录、浏览器选择等）；4）常见故障排查方法。重点讲解了通过修改settings.json文件来定制服务器参数，并提供了常用配置示例。该指南帮助用户快速掌握Live Server的核心功能，实现高效的前端开发热重载体验。
live Server安装使用
weixin_47768980的博客
07-07 1664
live-server可以帮助我们在网页开发中开启一个实时的服务以方便我们可以实时查看开发的网页，更主要的是开发移动端的时候在同一局域网下我们可以通过本地在手机上访问网页效果。我们就可以通过生成的地址去访问，当然也可以通过本地id加55656端口号进行访问，如果想用其他端口号可以在运行live-server的时候用--port的方式指定端口号。安装完之后就会有live-server的命令然后我们在需要启动服务的根目录输入cmd回车。然后输入live-server命令回车。
live-server安装
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
09-09 851
live-server作为web server来部署Html和JavaScript，并运行在浏览器中。live-server轻量且简单，初学者首选。
srt-live-server:srt live服务器，以降低延迟
04-29
srt-live-server（SLS）是基于安全可靠传输（SRT）的低延迟开放源代码实时流服务器。 通常，在Internet中，通过SLS进行传输的延迟小于1秒。 要求 请先安装SRT，有关系统环境，请参考SRT（ ）。 SLS只能在基于linux的...
使用live-server快速搭建本地服务器+自动刷新的方法
11-26
这里我们将详细讲解如何使用`live-server`这一工具来达成这一目标。 `live-server`是一款轻量级的开发用Web服务器，它不仅能够提供本地服务器环境，还能在你保存更改文件时自动刷新浏览器，这样你就不必手动刷新...
NodeJS | 搭建本地/公网服务器 live-server 的使用与安装
键盘爱好者
01-16 1194
一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。安装 live-server安装方法这里-g代表全局安装，安装完成后，你就可以在任何地方使用命令了。安装后的验证安装完成后，可以在命令行中输入来查看 live-server 的版本号，如果能正常显示版本号，说明安装成功。环境变量问题Node.js 环境变量未配置正确。
从零开始使用ubuntu-24.04-live-server搭建word press网站
2301_76272092的博客
07-04 2225
首先，在Ubuntu的服务器版本。然后，在虚拟机中创建 Ubuntu Server，也可以使用ESXI或者PVE这种底层系统，也可以在windows中使用VMware等软件，搭建虚拟机环境的话可以在网上搜索相关教程，方法都是大同小异，这里就不做详细介绍。按Enter开始安装语言默认即可有的也会显示：选择Reboot Now。
web服务器live-server的安装及使用
kg_loveyou2的专栏
12-11 1161
...
live-server 安装与使用
weixin_43377805的博客
08-11 1034
live -server 安装教程
atom-live-server插件安装
Asuna的博客
05-18 3256
1、github搜索插件 复制插件地址： 2、下载到atom的packages文件夹 默认目录是：C:\Users\14041\.atom\packages win+R——cmd 进入命令行。 输入cd C:\Users\14041\.atom\packages 进入安装目录。 输入git clone https://github.com/jas-chen/atom-live-s...
live-server
aliven1的博客
05-11 753
npm i live-server -g,项目根目录命令行开启：live-server，就可以看到服务器环境的项目情况
Vue下载与live-server安装
lilyshing的博客
06-20 653
live-server可以在本地搭建临时的服务器，并且实现hot socketing（热插拔）即修改文件浏览器自动刷新，还可以自动打开项目。二、全局安装live-server服务器。用npm进行全局安装。
【亲测免费】 VSCode Live Server 安装与使用教程
gitblog_00534的博客
08-12 1807
VSCode Live Server 安装与使用教程 1. 项目介绍 VSCode Live Server 是一个由 Ritwick Dey 开发的Visual Studio Code扩展插件，它提供了一个带有实时重载功能的本地开发服务器。该插件允许开发者在编辑静态或动态页面时实时预览变化，无需手动刷新浏览器。对于前端开发者来说，这是一个非常实用的工具，可以提升开发效率。 2. 项目快速启动 安装...
VS Code中使用live Server中所涉及的配置问题
wassup博客
06-18 9637
live server可以实时查看代码更改后的变化。测试十分快速。详细用处可以自行百度。 本文教你live server安装过程中所涉及的方方面面，超级容易上手。安装步骤如下： 目录 一、安装live server 二、配置live server 三、配置后使用live server 一、安装live server 在扩展中搜索 live server，然后点击安装。等待安装完毕进行下一步配置。 二、配置live server 1、安装之后，开始配置live server，在VS.
在WebStorm中通过live-server插件搭建Ajax运行环境
明哥
08-07 1833
官网: https://nodejs.cn/download/使用淘宝的镜像： 也可以使用cnpm 配置之后可以验证是否成功（返回刚刚设置的地址即成功）： 之后就可以使用cnpm了：（安装live-server） webstorm不会自动开启服务器，需要手动开启 打开终端,输入命令
怎么安装live-server
03-04
<think>好的，用户想要了解如何安装live-server。首先，我得确认live-server是什么。它是一个具有实时重载功能的小型开发服务器，通常用于前端开发，可以在保存文件时自动刷新浏览器。 接下来，用户可能需要知道安装的前提条件。live-server是基于Node.js的，所以需要先安装Node.js和npm。我应该先检查用户是否已经安装了这些工具。如果没有，需要指导他们如何安装Node.js，因为这会自动包含npm。 然后，安装live-server的步骤。通常是通过npm全局安装，这样可以在任何项目中使用。命令是`npm install -g live-server`。不过，有时候用户可能会遇到权限问题，这时候可能需要使用sudo（在Mac或Linux上）或者以管理员身份运行命令行工具（在Windows上）。 安装完成后，如何启动live-server？基本用法是进入项目目录，然后在终端运行`live-server`。这会自动打开浏览器，默认端口是8080。如果端口被占用，可能需要指定其他端口，比如`live-server --port=3000`。 可能还需要介绍一些常用参数，比如`--open`指定浏览器，`--watch`指定监视的目录，或者`--ignore`忽略某些文件。这些选项能帮助用户根据需求定制使用方式。 另外，用户可能想知道有没有其他替代方案，比如VS Code的Live Server扩展，这样可能更方便。如果有必要的话，可以简单提一下，但主要按照用户的要求专注于npm安装方法。 最后，确保步骤清晰，没有遗漏，并且用中文简洁地解释每个步骤。需要避免使用专业术语过多，让新手也能理解。同时，检查是否有常见的安装问题，比如网络问题或者权限问题，并给出解决方案的建议。</think>以下是安装和使用 `live-server` 的详细步骤： --- ### **1. 安装 Node.js** `live-server` 依赖 Node.js 环境，需先安装： - **Windows/macOS**：访问 [Node.js 官网](https://nodejs.org)，下载并安装 LTS 版本（自动包含 npm）。 - **Linux**： ```bash # Debian/Ubuntu sudo apt install nodejs npm ``` --- ### **2. 安装 live-server** 通过 npm 全局安装（需管理员权限）： ```bash # Windows 用户以管理员身份打开 CMD/PowerShell npm install -g live-server # macOS/Linux 用户使用 sudo sudo npm install -g live-server ``` --- ### **3. 使用 live-server** 1. **进入项目目录** ```bash cd 你的项目路径 ``` 2. **启动服务器** ```bash live-server ``` - 自动在浏览器打开 `http://localhost:8080` - 修改文件后浏览器会自动刷新 --- ### **常用参数** | 参数 | 说明 | 示例 | |------|------|------| | `--port=3000` | 指定端口 | `live-server --port=3000` | | `--open=/subdir` | 打开子目录 | `live-server --open=./src` | | `--ignore=*.css` | 忽略文件类型 | `live-server --ignore=*.tmp` | --- ### **替代方案** - **VS Code 用户**：安装 [Live Server 扩展](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)，右键文件选择「Open with Live Server」更快捷。 --- ### **常见问题** - **端口冲突**：使用 `--port` 更换端口 - **权限不足**：在命令前加 `sudo`（Linux/macOS）或以管理员身份运行终端（Windows）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值