npm 前端项目别人电脑访问不了的核心原因 + 解决方法

你遇到的问题非常典型：

• Java 后端能被别人访问 → 说明网络、端口、防火墙都没问题
• npm 前端访问不了 → 问题出在前端开发服务器的配置（默认只允许本机访问）

一、核心原因

前端用 npm run dev/npm start 启动的是 开发服务器（vite/webpack），默认绑定 localhost / 127.0.0.1，只允许自己电脑访问，其他设备连不上。

二、3 步快速解决（按顺序试，100% 解决）

第 1 步：修改启动配置（最关键）

情况 1：用 Vite（现在 90% 前端项目）

打开项目根目录的 vite.config.js / vite.config.ts，添加 server.host：

import { defineConfig } from 'vite'
export default defineConfig({
  server: {
    host: '0.0.0.0', // 允许所有IP访问
    port: 你的端口号 // 比如8080，和原来保持一致
  }
})

情况 2：用 Vue CLI / Webpack（老项目）

打开 package.json，修改启动命令：

"scripts": {
  "serve": "vue-cli-service serve --host 0.0.0.0"
}

或者直接在命令行运行：

npm run serve -- --host 0.0.0.0

第 2 步：重启前端项目

修改配置后，必须关闭原来的终端，重新执行启动命令：

npm run dev
# 或 npm start / npm run serve

启动成功后，你会看到控制台输出：

  Local:   http://localhost:8080/
  Network: http://192.168.1.100:8080/  ✅ 出现这个就成功了