live-server的使用

最新推荐文章于 2025-10-26 10:49:16 发布
原创 最新推荐文章于 2025-10-26 10:49:16 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#服务器

本文介绍如何通过live-server工具来快速初始化并部署本地项目。主要包括安装live-server，配置npm脚本来启动服务器，并设置特定端口。适用于前端开发者进行项目开发及调试。

本地开启一个服务器live-server的使用

  1. 初始化项目,生成package.json文件
    npm init -y
  2. 安装
    npm i live-server -g
  3. 启动
    live-server
    在脚本中起别名’server’:‘live-server ./ --port=8888’：npm run server
酱酱子_
关注
静态网页开发神器 live-server
lxd_max的博客
11-13 1128
“ 作为一名后端开发的人员，前后端分离的时候，本机开发就可以使用它。” 静态网页开发神器 live-server。
live Server的使用
m0_52244931的博客
09-19 2416
live Server的使用
5分钟上手Live Server：让前端开发效率飙升的实时预览神器
最新发布
gitblog_00114的博客
10-26 481
Live Server是一款广受欢迎的Visual Studio Code插件，专为前端开发者打造，提供本地开发服务器和实时页面重载功能，让静态与动态网页的开发迭代变得前所未有的流畅。无论是HTML、CSS还是JavaScript文件的修改，都能即时在浏览器中呈现效果，彻底告别手动刷新的繁琐流程。 ## ✨ 为什么选择Live Server？核心优势解析 ### ⚡ 实时预览，告别F5刷新 传...
live-server 的使用
乐辞的博客
10-24 6255
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。但现在流行修改文件浏览器自动刷新 hot socketing（热拔插），如 live-reload。本地开发常常需要搭建临时的服务，第一时间我们会想到用 http-server。而 live-server 实现了上面这三个插件的功能。
live Server安装使用
weixin_47768980的博客
07-07 1805
live-server可以帮助我们在网页开发中开启一个实时的服务以方便我们可以实时查看开发的网页，更主要的是开发移动端的时候在同一局域网下我们可以通过本地在手机上访问网页效果。我们就可以通过生成的地址去访问，当然也可以通过本地id加55656端口号进行访问，如果想用其他端口号可以在运行live-server的时候用--port的方式指定端口号。安装完之后就会有live-server的命令然后我们在需要启动服务的根目录输入cmd回车。然后输入live-server命令回车。
live-server安装与使用
simpleshao的博客
12-21 8091
原文链接：https://www.jianshu.com/p/6661aaebf412 live-server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。 使用live-server，首先需要安装它： npm in...
VSCode Live Server 插件安装和使用
呆萌很的博客
01-08 6959
VSCode Live Server 插件安装和使用
live server使用
wzp20092009的博客
04-02 6324
Launch a development local Server with live reload feature for static & dynamic pages。 简而言之，一个开服务展示静态或者动态页面的本地服务器。 在线安装 vscode在 扩展Extensions 中搜索 Liver Server，选择并安装它。 最新的版本不需要配置setting首选项那些了。 选择具体的页面，右击文件选择 Open with Liver Server 服务器就启动了，所选择浏览的页面也会在.
live-server的用法
i_yuanpeng的博客
05-12 3270
这是一款带有热加载功能的小型开发服务器。用它来展示你的HTML / JavaScript / CSS，但不能用于部署最终的网站。 在前端开发的过程中，有时候希望页面实时刷新，这时候就可以用到live-server
推荐：Live Server — 实时开发服务器
gitblog_00006的博客
05-11 1643
**Live Server** 是一个专为前端开发者设计的本地开发服务器，它带有实时刷新功能，适用于静态和动态页面。无论你是PHP开发者还是JavaScript爱好者，这款Visual Studio Code插件都能让你的开发流程更加流畅。 ## 项目介绍 Live Server 提供了一个快速启动的本地服务器，配合浏览器自动刷新功能，可实现实时查看代码更改的效果。无需频繁地手动刷新页面，极大...
【亲测免费】 VSCode Live Server 安装与使用教程
gitblog_00534的博客
08-12 2123
VSCode Live Server 是一个由 Ritwick Dey 开发的Visual Studio Code扩展插件，它提供了一个带有实时重载功能的本地开发服务器。该插件允许开发者在编辑静态或动态页面时实时预览变化，无需手动刷新浏览器。对于前端开发者来说，这是一个非常实用的工具，可以提升开发效率。 ## 2. 项目快速启动 ### 安装插件 1. 打开 Visual Studio Co...
前端自动化刷新工具 live-server 的介绍与使用方法
Sunday 优快云博客
03-24 4585
前言介绍前端开发调试的时候以前总需要不断的刷新看效果，效率很差。使用live-server后，当鼠标离开编辑器之后会自动为我们刷新浏览器。liver-server的安装使用cnpm全局安装cnpm install -g live-server liver-server的使用windows下 在cdm切换到当前项目目录，输入命令live-server即可。如图：...
live-server
weixin_45581741的博客
09-02 471
插件使用方式
live-server启动一个本地服务器（手机访问）
热门推荐
L凯的博客
04-22 1万+
 开启本地服务器     通常我们写一个项目时需要开启一个服务器移动设备访问测试，那么如何开启一个本地服务器并且手机可以放呢，那么就可以用live-server来开启一个服务器。    通过以下三步就可以啦1，首先安装live-servernpm i -g live-server(安装之前首先你得有npm工具，)安装完成之后，就可以在你项目根目录中开启命令行输入:（必须进入你项目的根目录）live...
【VSCode】插件推荐 - Live Server
m0_49239264的博客
06-02 2149
简单易用：您可以通过在VSCode的侧边栏中找到Live Server插件，点击"Go Live"按钮或在HTML文件上右键选择"Open with Live Server"来启动服务。自动刷新功能：当您在VSCode中编辑HTML、CSS或JavaScript文件并保存更改时，Live Server会自动在浏览器中刷新页面，让您立即看到最新的变化。多浏览器支持：Live Server支持在不同的浏览器上运行，您可以在插件设置中指定默认浏览器，甚至可以为不同的项目设置不同的浏览器。
live-server使用
04-03
### 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]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值