让你手机也能访问 webpack-dev-server 开启的本地服务器

## 前言

webpack-dev-server 是一款强大的工具，它可以帮助前端开发人员快速搭建本地开发环境，并提供热更新功能。然而，很多开发人员在使用webpack-dev-server时遇到过手机无法访问本地服务器的问题。本文将深入分析原因，并提供具体解决方案，让你的手机也能轻松访问 webpack-dev-server 开启的本地服务器。

## 问题分析

### 1. 端口号不一致

webpack-dev-server 默认使用 8080 端口来启动本地服务器。但是，一些手机可能无法访问这个端口。因此，我们需要在启动 webpack-dev-server 时指定一个不同的端口号，例如 3000。

### 2. IP地址不正确

webpack-dev-server 默认使用 127.0.0.1 这个 IP地址来启动本地服务器。但是，这个 IP地址只能被本机访问。如果想要让手机访问本地服务器，我们需要使用一个局域网内的 IP地址，例如 192.168.1.100。

### 3. 路由器设置问题

一些路由器可能存在安全设置，导致手机无法访问本地服务器。我们需要在路由器中打开端口转发功能，将 webpack-dev-server 使用的端口号转发到本机。

### 4. 防火墙设置问题

一些电脑可能存在防火墙设置，导致手机无法访问本地服务器。我们需要在防火墙中打开 webpack-dev-server 使用的端口号，以便手机可以访问本地服务器。

## 解决方案

### 1. 修改端口号

在启动 webpack-dev-server 时，我们可以使用 --port 参数来指定端口号。例如，以下命令将 webpack-dev-server 启动在 3000 端口：

webpack-dev-server --port 3000

### 2. 修改 IP地址

在启动 webpack-dev-server 时，我们可以使用 --host 参数来指定 IP地址。例如，以下命令将 webpack-dev-server 启动在 192.168.1.100 IP地址上：

webpack-dev-server --host 192.168.1.100

### 3. 打开路由器端口转发

我们需要在路由器中打开端口转发功能，将 webpack-dev-server 使用的端口号转发到本机。具体步骤因路由器型号不同而异，请参考路由器说明书。

### 4. 关闭防火墙

如果电脑存在防火墙，我们需要在防火墙中打开 webpack-dev-server 使用的端口号。具体步骤因防火墙软件不同而异，请参考防火墙软件说明书。

## 结语

通过以上步骤，我们可以解决手机无法访问 webpack-dev-server 开启的本地服务器的问题。希望本文对您有所帮助。如果您还有其他问题，请随时留言。