用npm 启动的前端项目在别人的电脑上访问不了，但是Java启动的项目可以

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：

 

javascript

 

运行

 

 

 

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

 

 

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

 

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

 

json

 

 

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

 

 

或者直接在命令行运行：

 

bash

 

运行

 

 

 

npm run serve -- --host 0.0.0.0

 

 

---

 

第 2 步：重启前端项目

 

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

 

bash

 

运行

 

 

 

npm run dev
# 或 npm start / npm run serve

 

 

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

 

plaintext

 

 

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