深色模式
2.3 本机能跑不等于同事能访问，内网门牌号扫盲
前面我们拆开了一次 Web 请求：前端发请求，后端处理，数据库保存，前端再显示结果。
这解决的是“项目内部怎么工作”的问题。
但校园工具还有一个很现实的问题：
为什么我电脑上能打开，同事电脑上却打不开？
很多老师第一次做到这一步时，都会有点委屈。明明页面能运行，按钮也能点，数据也能保存。可一到隔壁办公室，地址发过去，对方就是打不开。
这不一定是代码错了。
很多时候，是地址没说对，门没开对，或者防火墙拦住了。
localhost 只代表我这台电脑
先从最容易误会的词开始：localhost。
当你在自己电脑上打开：
text
http://localhost:5173它的意思不是“学校里的某个网站”。
它的意思是：访问我这台电脑自己。
127.0.0.1 也是类似含义。它通常也指向本机。
所以你把 http://localhost:5173 发给同事，同事电脑会怎么理解？
它会以为：我要访问我自己这台电脑的 5173 端口。
如果同事电脑上没有运行你的项目，自然打不开。
这就是很多“我这里能打开，他那里打不开”的第一层原因。
局域网 IP 才是给别人看的门牌
在校园内网里，如果你想让同事访问你电脑上运行的项目，通常要告诉对方你的局域网 IP。
它可能长得像这样：
text
192.168.1.23或者：
text
10.20.30.45可以先把局域网 IP 理解成校园内网里的门牌号。
而端口，则像这栋楼里的具体房间号。
所以一个完整访问地址通常长这样：
text
http://192.168.1.23:5173其中：
192.168.1.23是你这台电脑在校园内网里的地址。5173是项目当前运行的端口。http://表示用浏览器访问 Web 服务。
这比 localhost 更适合发给同事。
端口像房间号
为什么还要有端口？
因为一台电脑上可能同时运行很多服务。
比如一个项目跑在 5173，另一个后端服务跑在 3000，数据库可能又用别的端口。IP 只能找到这台电脑，端口才告诉浏览器要进哪一个服务。
你可以把它想成：
text
IP 地址：找到学校里的哪栋楼。
端口号：找到这栋楼里的哪间办公室。如果 IP 对了，但端口错了，也打不开。
如果端口对了，但项目没有启动，也打不开。
如果项目启动了，但只允许本机访问，别人还是可能打不开。
服务要愿意听外面的请求
很多开发服务器默认只监听本机。
这对安全是好事，但对校园内网测试会造成困惑。你自己访问 localhost 没问题，同事访问你的局域网 IP 却失败。
这时要让 AI 帮你检查启动命令。
比如一些 Vite 项目需要类似这样的参数，才方便局域网内其他设备访问：
powershell
npm run dev -- --host 0.0.0.0这条命令不是让你死记。
你只要知道：有些项目需要明确告诉开发服务器“不要只听本机，也允许局域网里的其他电脑访问”。
以后遇到同事打不开时，可以把启动命令、项目类型和报错截图交给 AI，让它判断是不是监听地址的问题。
Windows 防火墙也可能拦门
还有一个常见拦路点：Windows 防火墙。
你的项目可能已经启动，地址也写对了，但第一次开放某个端口时，系统会弹出是否允许访问的提示。如果当时点了拒绝，或者学校电脑有安全策略限制，其他电脑就可能访问不到。
这时候不要急着怀疑代码。
先按顺序排查：
- 项目是不是还在运行。
- 端口是不是和你发给同事的一致。
- 同事电脑和你的电脑是不是在同一个校园内网里。
- 开发服务器是不是允许局域网访问。
- Windows 防火墙有没有拦截。
这几步比盲目改代码有效得多。
ping 能辅助，但不能当最终验收
很多人会用 ping 测试网络通不通。
比如：
powershell
ping 192.168.1.23如果能收到回复，说明两台电脑之间大概率能互相找到。
但这里要小心：ping 不是最终验收。
有些学校网络会禁用 ping，但浏览器仍然能访问服务。也有些时候，ping 能通，但端口被防火墙挡住，网页还是打不开。
所以最终判断只有一个：同事电脑浏览器里输入地址后，能不能真正打开页面。
给 AI 的排查描述可以这样写
如果你想让 AI 帮你判断内网访问问题，可以这样描述：
text
我在 Windows 电脑上运行一个 Vite / Vue 项目。
我自己的电脑可以打开：http://localhost:5173
我的局域网 IP 是：192.168.1.23
我发给同事的地址是：http://192.168.1.23:5173
我启动项目的命令是：
npm run dev
同事电脑访问时显示：（粘贴错误提示或截图文字）
请帮我判断问题更可能出在：
1. 地址写错
2. 端口不对
3. 服务只监听 localhost
4. Windows 防火墙
5. 不在同一个局域网
请一次只给我一个最稳的排查步骤。注意最后一句。
内网问题也不要一口气乱改。一次只排查一层，反而更快。
校园内网是第一道上线关
这一篇讲的不是公网部署，也不是域名和 HTTPS。
那些内容会留到后面的落地篇。
现在你只需要建立一个最小模型：
text
localhost 是自己访问自己。
局域网 IP 是同事访问你。
端口是具体服务入口。
防火墙可能拦住外部访问。
浏览器能打开，才算真的连通。想继续查，可以认这些词
这一篇只讲校园内网访问的最小模型。如果你后面想继续补网络基础，可以先从这些关键词入手。
| 本文里的说法 | 专业技术名词 | 可以按需了解什么 |
|---|---|---|
| 我这台电脑自己 | 本机 / Localhost | localhost 和 127.0.0.1 的区别与联系 |
| 校园网里的门牌号 | 局域网 IP / LAN IP | IPv4 地址、同网段、内网地址 |
| 服务入口的房间号 | 端口 / Port | 端口占用、常见端口、访问地址写法 |
| 让服务听外面的请求 | 监听地址 / Host Binding | 0.0.0.0、127.0.0.1、开发服务器参数 |
| Windows 拦住访问 | 防火墙 / Firewall | 入站规则、端口放行、安全提示 |
| 测两台电脑能否互相找到 | 连通性测试 / Connectivity Test | ping、浏览器访问、端口测试 |
| 只在学校内部访问 | 内网 / Intranet | 局域网服务和公网服务的区别 |
| 让所有人正式使用 | 部署 / Deployment | 服务器、域名、HTTPS，后续落地篇会讲 |
到这里，你已经知道为什么校园小工具适合 Web，也知道一次保存请求怎样走完，还知道本机项目怎样在校园内网里被同事访问。
但项目一旦能被同事打开，你就会更想继续让 AI 加功能、改界面、补逻辑。
这时还有一个问题必须提前解决：
AI 改得很快，万一改坏了，怎么回到上一个能用的版本？
下一篇，我们就给代码备一颗“后悔药”，认识一下 Vibe Coding 里最值得先学的保护工具：Git。
封面