如何让你的Vue项目支持局域网访问 - 完整指南

在日常开发中，我们经常需要让同事或测试人员通过局域网访问本地运行的Vue项目。本文将手把手教你如何将Vue项目从只能本机访问升级为支持局域网访问，让你的团队协作更加高效！

📋 项目背景

我们有一个基于 Vite + Vue3 的现代化前端项目，使用 ElementPlus 作为UI框架。默认情况下，项目只能在本机通过 localhost:3000 访问，这在团队协作测试时显得不够便利。

🔧 修改步骤

第一步：定位配置文件

首先，我们需要找到项目的 Vite配置文件 。在项目根目录下，找到 vite.config.js 文件：

javascript 复制代码

// vite.config.js (修改前)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: 3000
  }
})

第二步：添加局域网配置

关键修改在于 server 配置部分。我们需要添加三个重要参数：

javascript 复制代码

// vite.config.js (修改后)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: 3000,
    host: '0.0.0.0',  // 关键配置：监听所有网络接口
    cors: true,       // 启用跨域
    open: true        // 启动时自动打开浏览器
  }
})

第三步：配置详解

让我们详细解释每个新增参数的作用：

参数

作用

示例值

host: '0.0.0.0'

监听所有网络接口，允许外部访问

默认是localhost

cors: true

启用跨域资源共享，避免API调用问题

建议始终开启

open: true

启动时自动打开浏览器

提升开发体验

🚀 启动与访问

启动项目

arduino 复制代码

# 在项目根目录执行
npm run dev

启动成功后，你会看到类似以下的输出：

perl 复制代码

➜  Local:   http://localhost:3000/
➜  Network: http://192.168.1.100:3000/  # 这就是局域网地址

获取本机局域网IP

如果控制台没有显示Network地址，可以通过以下方式获取：

Windows系统：

复制代码

ipconfig

找到"IPv4地址"字段，通常是192.168.x.x或10.x.x.x

Mac/Linux系统：

perl 复制代码

ifconfig | grep inet

其他设备访问

确保所有设备连接在同一个WiFi网络，然后在手机/平板/其他电脑的浏览器中输入：

arduino 复制代码

http://[你的局域网IP]:3000

例如：http://192.168.1.100:3000

⚠️ 常见问题解决

1. 防火墙阻止访问

症状：其他设备无法访问，提示连接超时

解决方案：

Windows：允许应用通过防火墙 → 添加Node.js
Mac：系统偏好设置 → 安全性与隐私 → 防火墙

2. 端口被占用

症状：启动时报错"Port 3000 is already in use"

解决方案：

yaml 复制代码

# 查看占用端口的进程
netstat -ano | findstr :3000

# 或修改vite.config.js中的端口号
server: {
  port: 3001,  // 改为其他端口
  host: '0.0.0.0'
}

3. 公司网络限制

症状：在家可以访问，在公司不行

解决方案：

联系IT部门开放3000端口
使用VPN连接
改用ngrok等内网穿透工具

🎯 验证测试

完成配置后，建议进行以下测试：

本机测试 ：http://localhost:3000
本机IP测试：http:// $局域网IP$ :3000
手机测试：连接同一WiFi后访问
同事测试：让同事访问你的IP地址

📱 移动端适配提示

由于项目使用了响应式设计，在手机上访问时会自动适配。如果发现样式问题，可以：

使用Chrome开发者工具的移动端模拟器测试
检查viewport meta标签是否正确
确保使用了响应式单位（rem、vw等）

🎉 总结

通过以上简单配置，我们成功将Vue项目从只能本机访问升级为支持局域网访问。这不仅提升了团队协作效率，也方便了测试和演示。

关键要点回顾：

修改vite.config.js的server.host为'0.0.0.0'
确保所有设备在同一网络环境
注意防火墙和网络安全设置

现在，你可以愉快地与团队成员共享你的Vue项目了！🚀

如果你在配置过程中遇到任何问题，欢迎在评论区留言交流！