live-server踩坑~

首先介绍live-server的安装和使用

安装

1、live-server是依赖于nodejs的,所以在安装live-server之前确保已经安装了nodejs,检查是否安装nodejs

打开cmd:

输入node -v 检查是否安装nodejs

已经安装了node的情况下,使用npm install -g live-server全局安装live-server,已经安装了就不用再安装了,安装成功会显示一个版本号和其他信息

使用

使用live-server,在项目跟目录下打开cmd,或者将已打开的cmd切换到项目根目录下,我比较喜欢直接在项目根目录下直接cmd,避免了输命令出错还节约时间,在根目录下按住shift键,点击鼠标右键,会有个在此处打开命令窗口,对,点它家快速打开了,输入命令live-server就可启动服务了~如下图,运行成功之后会自动打开浏览器,如果想在手机上访问,将前面的127.0.0.1改成自己的IP就行了。

是不是发现每次打开都是127.0.0.1开头的,自己改ip很麻烦。只需要一步,轻松搞定:找到live-server的index.js

修改里面的127.0.0.1为自己的IP就可以了

踩坑

明明自己已经安装了live-server是不是还会出现不适内部命令或外部命令,没关系,小场面!冷静的打开我们的系统环境变量,检查path中的路径是否包含live-server的安装路径,不包含的话,配置一下就可以了,下面是配置步骤:
首先找到live-server安装路径,如果想不起了就问计算机,通过where live-server命令,下面就是我的全局路径,

然后根据路径去找到包含live-server的文件夹,复制发哦path就可以了,打开path的步骤:计算机点击右键-》属性-》高级系统设置-》环境变量->path

如果这个都设置了还不行的话,再检查一下你node的安装路径有没有设置成环境变量,步骤也是where node 找到之后复制路径到path,跟上面一样,到这里肯定没问题了,电脑肯定能访问了,如果手机和电脑连同一个WiFi都不能访问,检查手机ip和电脑ip是不是同一个网关,电脑怎么看ip我就不说的,大家都知道,手机看ip,设置-》dian-》wlan-》点击你连接的WiFi就会显示IP地址。看ip的前三段是不是一样的,不是一样的就手动修改电脑的ip地址,修改好之后,重启项目下的live-server就可以了。

以上都是我自己在使用中遇到的坑~希望对大家有帮助

 

<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)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值