当Vue项目启动后，通过IP地址方式在相同网络段的其他电脑上无法访问前端页面？

男娘i 2024-04-29 00:34 5阅读 0赞

当Vue项目启动后，通过IP地址方式在相同网络段的其他电脑上无法访问前端页面，可能是由以下几个原因造成的：

1.  **服务监听地址**：默认情况下，许多开发服务器（如Vue CLI的`vue-cli-service serve`）只监听`localhost`（127.0.0.1），这意味着它们只能接受来自本机的连接。为了使其能够接受来自网络上其他设备的连接，需要配置服务以监听所有网络接口（0.0.0.0）。
2.  **防火墙设置**：Windows或其他操作系统的防火墙可能阻止了对应用程序使用的端口的访问。如果服务正在运行，但其他设备无法连接，可能需要配置防火墙以允许外部设备访问该端口。
3.  **网络设置**：确保所有设备都连接到同一网络，并且没有子网或VPN配置阻止它们之间的通信。
4.  \*\*还有可能是：\*\*接口访问的代理地址写死是localhost，因此在别的电脑访问时候就会直接也是代理是localhost，因此展现不出页面。

#### 解决方案 ####

1.  **修改服务监听地址**：
    
     *  如果你使用的是Vue CLI 3或更高版本，你可以通过修改`vue.config.js`文件来指定开发服务器的监听地址。如果你的项目中还没有这个文件，你可以在项目根目录下创建一个。然后，添加以下配置以使其监听所有网络接口：
    
        module.exports = {
              
          devServer: {
              
            host: '0.0.0.0',
            disableHostCheck: true,
          },
        };
    
     *  启动开发服务器后，它将接受来自同一网络中任何设备的连接。
2.  **配置防火墙**：
    
     *  根据你的操作系统，允许通过防火墙访问Vue应用程序使用的端口（通常是8080，除非你更改了）。在Windows中，你可以通过“控制面板” > “系统和安全” > “Windows Defender 防火墙” > “高级设置”来配置防火墙规则。
3.  **确保正确的网络配置**：
    
     *  确保所有试图相互连接的设备都位于同一网络，并且没有任何网络隔离措施（如客人网络或子网限制）阻止它们之间的通信。

实施这些解决方案后，你应该能够从相同网络段的其他电脑通过IP地址访问Vue应用程序的前端页面。  
![在这里插入图片描述][23926dd51ffa4c08898db885b8da12ef.gif_pic_center]

[23926dd51ffa4c08898db885b8da12ef.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/ce7dcf6d207a4d109c639256b10dd9a5.gif