解决 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