webpack vue项目开发环境局域网访问方法

Webpack 配置的 Vue 项目开发环境默认只能在本机进行访问。如果要在局域网内访问，则需要进行相应的配置。下面详细讲解 webpack vue 项目开发环境局域网访问方法的完整攻略。

1. 修改webpack配置

首先，我们需要修改 webpack 的配置文件，将 Host 配置为 0.0.0.0，表示接受所有的网络访问请求。

在 webpack.dev.js 中添加如下代码：

devServer: {
  host: '0.0.0.0',
  port: 8080,
  hot: true,
  open: true,
},

2. 配置防火墙规则

其次，需要配置防火墙规则允许局域网访问当前电脑的 8080 端口。

以 Windows 操作系统为例，打开“高级安全 Windows 防火墙”，依次单击“入站规则”->“新建规则”，添加一条 TCP 端口为 8080 的规则，允许所有 TCP 连接。

3. 访问方式

最后，在局域网的其他设备上，打开浏览器，访问当前电脑的 IP 地址和 8080 端口即可访问。

例如，当前电脑的 IP 地址为 192.168.0.100，则在局域网的其他设备上，打开浏览器访问 http://192.168.0.100:8080 即可访问该 Vue 项目。

示例1：如果当前电脑 IP 地址为 192.168.1.100，则在浏览器中输入 http://192.168.1.100:8080 即可访问该 Vue 项目。

示例2：在防火墙中添加规则时，也可以指定允许某个局域网内指定 IP 地址的访问，只需在规则的“范围”中指定相应的 IP 地址即可。