解决 webpack-dev-server 在 UC 浏览器中无法正常运行的问题

如果你正在开发前端应用，使用 webpack-dev-server 可以方便地进行本地开发和调试。然而，当你在 UC 浏览器中尝试运行 webpack-dev-server 时，可能会遇到问题，例如页面加载失败或者无法正常启动服务器。本文将帮助你解决这个问题。

问题分析

首先，我们需要了解一下 UC 浏览器的特点。UC 浏览器是一款基于 Chrome 内核的浏览器，但是它具有自己的一些特性和限制。其中一个比较重要的限制是，UC 浏览器禁止了 localhost 的访问。

当你使用 webpack-dev-server 启动一个本地服务器时，它将默认监听 localhost:8080 端口。而在 UC 浏览器中，由于禁止了 localhost 的访问，因此无法正常连接到本地服务器。

解决方案

使用 IP 地址代替 localhost

为了解决这个问题，我们可以使用 IP 地址来代替 localhost。IP 地址可以通过执行命令 ipconfig 或者 ifconfig 来获取。在 Windows 上，执行 ipconfig 命令后可以看到类似如下的输出：

-------- ------- ----- ---- -----------

   ------------------- --- ------  - - -----------
   ---------- ---- ------- - - - - - - ---------------------------
   ---- -------- - - - - - - - - - - - -------------
   ------ ---- - - - - - - - - - - - - -------------
   ------- ------- - - - - - - - - - - -----------

在这个例子中，我们可以使用 192.168.1.100 来代替 localhost。

为了让 webpack-dev-server 使用 IP 地址来启动本地服务器，我们需要在启动命令中指定 --host 参数。例如：

------------------ ------ -------------

现在，在 UC 浏览器中访问 http://192.168.1.100:8080 就应该可以正常加载页面了。

修改 hosts 文件

另一个解决方案是修改 hosts 文件来绑定一个域名到本地 IP 地址。这样，在 UC 浏览器中访问域名就会自动重定向到本地 IP 地址。具体操作步骤如下：

打开 hosts 文件。在 Windows 上，hosts 文件位于 C:\Windows\System32\drivers\etc\hosts。
在文件末尾添加一行类似如下的内容：
```
------------- -----------
```
这里的 example.com 可以替换成你喜欢的任何域名。
保存文件。

现在，在 UC 浏览器中访问 http://example.com:8080 就应该可以正常加载页面了。

示例代码

下面是一个简单的示例 webpack 配置，它使用 IP 地址启动本地服务器：

----- ---- - ----------------
----- ----------------- - -------------------------------

-------------- - -
  ----- --------------
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- --------
  --
  ---------- -
    ----- ----------------
  --
  -------- -
    --- -------------------
      --------- -------------------
    ---
  --
--

总结

UC 浏览器禁止了 localhost 的访问，导致 webpack-dev-server 无法正常运行。为了解决这个问题，我们可以使用 IP 地

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/5033

如果你遇到了 webpack-dev-server 在 UC 浏览器里跑不起来的问题