live-server的安装与使用

最新推荐文章于 2025-06-28 17:27:37 发布
最新推荐文章于 2025-06-28 17:27:37 发布
阅读量3.4w 收藏 11
点赞数
CC 4.0 BY-SA版权
分类专栏： node-js visual-studio-code ES6 文章标签： liveserver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29545573/article/details/78388145
本文介绍如何使用npm初始化项目，并安装live-server。通过简单的命令即可启动本地服务器并自动刷新页面。文章还提供了如何在package.json文件中配置启动命令及自定义端口的方法。

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

live-server的安装与使用

  • 初始化npm:npm init
  • 安装live-server：cnpm install -g live-server

  • 启动live-server：live-server

    –也可以设置快捷方式以及端口号：
    在package.json中找到”script”,写入:

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

（一开始写成了“–port:9090”，冒号是错误的，谢谢帮我指出错误的小伙伴(#^.^#)）
- 启动：cnpm run server

VSCode Live Server 插件安装和使用
呆萌很的博客
01-08 5711
VSCode Live Server 插件安装和使用
【vscode】 使用 【Live Server】插件 展示静态网站，自动刷新
jhgj56的博客
11-22 2274
vscode Live Server插件
live-server安装
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
09-09 858
live-server作为web server来部署Html和JavaScript，并运行在浏览器中。live-server轻量且简单，初学者首选。
ubuntu-server 与 ubuntu-live-server 的区别 笔记250628
最新发布
kfepiza的博客
06-28 885
Subiquity 是Ubuntu 服务器版（Ubuntu Server）的现代化安装程序，由 Canonical 开发，旨在替代传统的基于文本的 Debian 安装程序（Debian-Installer）。它通过图形化界面和自动化流程简化了服务器系统的安装与配置，尤其适用于云环境和快速部署场景。
webstorm live-server
liu_g_d的博客
05-17 4531
webstorm live-server 已安装node和live-server 1.1 未配置live-server 1.2 配置live-server alt+F12，输入 live-server 若开启不了，修改此设置
web服务器live-server的安装及使用
热门推荐
Hello，陌生人^o^。遇见你真好...
07-10 1万+
在写一下简单的项目或学习一些技术的练习，没有服务器的话，每次写的代码都需要手动刷新浏览器。有点无奈，但是如果你安装了这个live-server 服务器就可以不用手动刷新，实时预览自己写的代码了。 （一）安装 1.前提条件需要node.js和npm的依赖（可以自己先搞定，不难）； 2.使用npm全局安装：npm install -g live-server（本人使用淘宝镜像安装的） （二...
ubuntu 22.04.3 live server图文安装流程
yanchenyu365的博客
10-12 8105
13、是否升级到专业版pro，也就是付费服务，默认是跳过，点继续即可；备注：以下操作全用键盘，tab切换，enter确认，方向键移动；15、snap格式的预装软件，可依据实际情况勾选，一般不需要；8、配置源，简单说：就是下载更新源，一般输入国内阿里源地址；9、这里默认就是自动分区并且启用lvm，保持默认即可；14、这里要在这一行，回车让x选中，否则没有ssh；16、左上角提示安装完成，就可以点最下方的，重启了；7、如果需要配置代理请在这里配置，一般略过；2、选择语言，这里只能选择英语，无中文；
live-server启动一个本地服务器(手机访问)
weixin_40542544的博客
01-16 1477
开启本地服务器 通常我们写一个项目时需要开启一个服务器移动设备访问测试，那么如何开启一个本地服务器并且手机可以放呢，那么就可以用live-server来开启一个服务器 通过以下三步就可以啦 1、首先安装live-server npm i -g live-server 2、安装完成以后 安装完成之后，就可以在你项目根目录中开启命令行输入:（必须进入你项目的根目录） live-server 3.改...
CentOS-7-Server服务器的安装与配置
寅月十八的博客
09-10 2745
文章目录创建新的虚拟机镜像的安装 创建新的虚拟机 镜像的安装 1.选择镜像路径 2.开始虚拟机进行安装 3.选择第一安装选项 4.选择中文语言 5.进行简单配置 网络的配置 打开 更改主机名 点击应用 点击配置 配置静态IP https://blog.youkuaiyun.com/weixin_43849575/article/details/102996790?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163114917416780
live-server 的使用
乐辞的博客
10-24 6075
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 1671
live-server可以帮助我们在网页开发中开启一个实时的服务以方便我们可以实时查看开发的网页，更主要的是开发移动端的时候在同一局域网下我们可以通过本地在手机上访问网页效果。我们就可以通过生成的地址去访问，当然也可以通过本地id加55656端口号进行访问，如果想用其他端口号可以在运行live-server的时候用--port的方式指定端口号。安装完之后就会有live-server的命令然后我们在需要启动服务的根目录输入cmd回车。然后输入live-server命令回车。
VScode中如何下载使用Live Server插件
qq_45839155的博客
05-09 3732
VScode中如何使用Live Server插件Live Server 插件有什么用怎么下载使用 Live Server 插件有什么用 在写html页面的时候，在vscode写完代码后，代码保存一次，又需要到页面去刷新一下才能显示出最新结果，很麻烦，在vscode里面下载了Live Server 之后，使用这个插件，就能实现这样的事：写完代码按 ctrl+s（保存快捷键），页面自动跟着更新。 怎么下载使用 1.在vscode左方点最下方的图标，然后在搜索栏输入Live Server进行搜索，第一个就是，点击
【VSCode】插件推荐 - Live Server
m0_49239264的博客
06-02 1976
简单易用：您可以通过在VSCode的侧边栏中找到Live Server插件，点击"Go Live"按钮或在HTML文件上右键选择"Open with Live Server"来启动服务。自动刷新功能：当您在VSCode中编辑HTML、CSS或JavaScript文件并保存更改时，Live Server会自动在浏览器中刷新页面，让您立即看到最新的变化。多浏览器支持：Live Server支持在不同的浏览器上运行，您可以在插件设置中指定默认浏览器，甚至可以为不同的项目设置不同的浏览器。
live-server的用法
i_yuanpeng的博客
05-12 3129
这是一款带有热加载功能的小型开发服务器。用它来展示你的HTML / JavaScript / CSS，但不能用于部署最终的网站。 在前端开发的过程中，有时候希望页面实时刷新，这时候就可以用到live-server
【亲测免费】 Visual Studio Code 插件 Live Server 安装与配置完全指南
gitblog_07464的博客
09-13 3760
Visual Studio Code 插件 Live Server 安装与配置完全指南 项目基础介绍及主要编程语言 Live Server 是一个广受欢迎的Visual Studio Code插件，由 Ritwick Dey 开发，旨在为前端开发者提供便捷的本地开发服务器，并支持实时页面重载功能。这个工具特别适合静态和动态网页的快速迭代开发。项目主要使用 TypeScript 编写，确保了代码的类...
VSCode安装Live server插件并设置为谷歌浏览器打开
又菜又爱玩的小熊
12-03 5573
文章目录一、安装Live server插件1.点击扩展——搜索Live server2.点击安装3.有如图所示表示安装完成二、设置为谷歌浏览器打开（安装完Live server插件以后需要重启一下VSCode）1.点击扩展——选择Live server插件——鼠标右击——选择扩展设置2.选择默认为谷歌浏览器3.设置完成可以运行测试下是否OK 一、安装Live server插件 1.点击扩展——搜索Live server 2.点击安装 3.有如图所示表示安装完成 二、设置为谷歌浏览器打开（安装完Live
简单记录下live-server使用
C_xran的博客
10-06 1005
简单使用下liver-server
vscode安装Live server插件后不能实时刷新的解决办法
frank_100的博客
03-16 2065
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]。 --- ###
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值