如何本地局域网下访问vue项目？【手机和电脑均可】

在学习vue的时候，在电脑上跑起来，总喜欢还能在别的电脑或者自己手机上能看见，这就需要小小的配置一下

win10设置

需要配置一下电脑的防火墙，把所需的端口（如：8080）打开。

设置方法如下：

1. Windows 10 ，搜索“控制面板”，打开，Windows 7 可以直接在开始菜单打开。

2. 点击“Windows Defender防火墙”——“高级设置”——新建“入网规则”。
   

3. 规则类型选择“端口”

4. 下一步“特定本地端口”填 8080-8088 （此处是一个 IP 段，因为如果打开多个项目，端口会被占用， Vue会自动分配一个新的端口。如：8081 ）。
   

5. 下一步“允许连接”

6. 下一步选择开放的场景，注意一定要选前两个

7. 下一步输入规则名称，点击“完成”即可

这样用手机访问电脑 IP 加端口号，192.168.1.11:8080 就可以打开项目了。

注意：手机和电脑必须在同一局域网下才能访问，同事电脑同理

获取IP 方法：

打开命令提示行工具，输入 ipconfig 回车, 就可以看到自己的IP了，比如我的 192.168.2.103 。

Vue项目无法使用局域网IP直接访问的配置方法 经验总结 第3张

这样更加方便真机调试，无需部署到服务器就可以进行访问和测试。

**注意：**如果项目使用的是笔记本启动的，而且还是连的WiFi，那么需要访问的ip应该是无线IP

其实在npm run serve启动vue项目的时候，控制台就有显示网络访问的IP地址，复制访问即可。