Vue项目配置在局域网下怎么访问

在开发Vue项目时，通常我们会在本地运行项目，并通过localhost或127.0.0.1来访问。然而，在某些情况下，我们可能需要让局域网内的其他设备也能访问这个项目，比如进行跨设备测试或展示给团队成员。本文将详细介绍如何配置Vue项目，使其能够在局域网下被访问。

1. 修改Vue项目的开发服务器配置

Vue项目默认使用的是webpack-dev-server作为开发服务器，它默认只监听localhost。为了让其他设备能够访问，我们需要修改开发服务器的配置，使其监听所有网络接口。

1.1 修改vue.config.js

如果你使用的是Vue CLI 3或更高版本，可以通过修改vue.config.js文件来配置开发服务器。如果没有这个文件，可以在项目根目录下创建一个。

// vue.config.js
module.exports = {
  devServer: {
    host: '0.0.0.0', // 监听所有网络接口
    port: 8080, // 端口号，可以根据需要修改
    disableHostCheck: true, // 禁用主机检查，允许任意主机访问
  },
};

1.2 修改package.json

如果你不想修改vue.config.js，也可以通过修改package.json中的scripts部分来传递参数给webpack-dev-server。

{
  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --port 8080 --disable-host-check"
  }
}

1.3 启动项目

配置完成后，重新启动项目：

npm run serve

此时，Vue项目将会监听所有网络接口，局域网内的其他设备可以通过你的IP地址和端口号来访问项目。

2. 获取本机IP地址

要让其他设备访问你的Vue项目，你需要知道你的本机在局域网中的IP地址。以下是一些常见操作系统中获取IP地址的方法。

2.1 Windows

1. 打开命令提示符（cmd）。
2. 输入ipconfig并回车。
3. 找到IPv4 地址，通常是以192.168.x.x或10.x.x.x开头的地址。

2.2 macOS

1. 打开终端。
2. 输入ifconfig并回车。
3. 找到en0或en1下的inet地址，通常是以192.168.x.x或10.x.x.x开头的地址。

2.3 Linux

1. 打开终端。
2. 输入ifconfig或ip addr show并回车。
3. 找到eth0或wlan0下的inet地址，通常是以192.168.x.x或10.x.x.x开头的地址。

3. 访问Vue项目

获取到本机IP地址后，局域网内的其他设备可以通过浏览器访问你的Vue项目。假设你的IP地址是192.168.1.100，端口号是8080，那么访问地址就是：

http://192.168.1.100:8080

4. 处理可能的防火墙问题

在某些情况下，即使你已经正确配置了Vue项目，其他设备仍然无法访问。这可能是由于防火墙阻止了外部访问。你需要确保防火墙允许外部设备访问指定的端口。

4.1 Windows

1. 打开“控制面板” -> “系统和安全” -> “Windows Defender 防火墙” -> “高级设置”。
2. 在左侧选择“入站规则”，然后在右侧点击“新建规则”。
3. 选择“端口”，点击“下一步”。
4. 选择“TCP”，并输入你使用的端口号（如8080），点击“下一步”。
5. 选择“允许连接”，点击“下一步”。
6. 根据需要选择适用的网络类型（域、专用、公用），点击“下一步”。
7. 为规则命名，点击“完成”。

4.2 macOS

1. 打开“系统偏好设置” -> “安全性与隐私” -> “防火墙”。
2. 点击“防火墙选项”。
3. 点击“添加”按钮，选择你使用的端口号（如8080），并确保设置为“允许传入连接”。

4.3 Linux

1. 打开终端。
2. 使用ufw命令允许端口访问：

   sudo ufw allow 8080/tcp

1. 重启防火墙：

   sudo ufw reload

5. 总结

通过以上步骤，你可以轻松地将Vue项目配置为在局域网内可访问。这对于团队协作、跨设备测试等场景非常有用。需要注意的是，确保你的网络环境安全，避免将开发服务器暴露在公共网络中。

希望本文对你有所帮助，祝你在Vue开发中顺利！