🚀构建生产环境版本用于局域网访问（适用于 Vue 项目）

在开发 Vue 项目的过程中，很多人使用 yarn serve 启动开发服务器进行调试。但开发模式存在以下问题：

• 访问速度慢，特别是局域网访问；
• 热更新频繁，调试时容易卡顿；
• 对非开发人员（比如测试、产品）不友好。

因此，当你需要在局域网内让其他设备访问你的项目，最佳做法是构建生产版本并部署一个轻量 Web 服务。本文将带你用 Yarn + Serve 实现这一目标。

---

📦 环境准备

确保你已经完成以下环境配置：

• Node.js 已安装
• Yarn 已安装（没有的话执行 npm install -g yarn）
• Vue 项目开发完成并可正常运行

---

🧰 操作步骤

✅ 第一步：构建生产环境代码

在你的 Vue 项目根目录中运行：

yarn build

该命令会生成一个 dist/ 文件夹，里面包含生产环境的静态资源文件。

构建完成后，你将看到类似结构：

dist/
├── css/
├── js/
├── index.html

---

✅ 第二步：安装 Serve 工具

Serve 是一个零配置、可快速部署静态资源的轻量 HTTP 服务工具。

执行以下命令全局安装：

yarn global add serve

---

✅ 第三步：运行本地服务器

在项目根目录中运行：

serve -s dist

默认会监听 5000 端口，并输出类似信息：

✔ Serving!
- Local:            http://localhost:5000
- On Your Network:  http://192.168.1.100:5000

🎉 此时你的项目已经部署成功！

---

📱 在局域网设备上访问

使用手机或其他电脑连接同一个 Wi-Fi，然后在浏览器输入：

http://192.168.1.100:5000

注意：IP 地址以你本机为准，命令行中会显示你局域网的实际 IP。

---

🛠️ 固定端口 & 开放局域网访问（推荐）

如果你希望强制使用某个端口（如 8080），并且确保局域网可访问，请使用以下命令：

npx serve -s dist --listen 8080

参数说明：

• -s dist：指定静态资源目录
• --listen 0.0.0.0:8080：监听所有网卡、绑定 8080 端口

这样你就可以通过 http://192.168.1.100:8080 在局域网中访问了。

---

🔚 结束语

使用生产环境部署不仅可以显著提高访问速度，还能减少意外调试信息暴露，为你提供更接近正式环境的体验。

无论是用于项目预览、局域网联调，还是部署测试版本，这是推荐使用的轻量级部署方法！

---

📌 如果你喜欢这篇文章，不妨点赞收藏，下次再也不担心局域网访问慢的问题啦！