在日常开发、测试、内网生产环境中，我们经常遇到一个刚需场景：只有一台Nginx服务器，需要同时部署多个独立的Vue/React前端项目。
很多新手会在这里产生困惑：
服务器只有一个公网/内网IP，没有多个域名，怎么区分多个前端服务？
如果有多个域名，Nginx 又是如何做到80端口部署多个网站不冲突？
server_name和location在多前端部署中到底该怎么选？
本文结合实战场景，清晰拆解无域名（纯IP访问）和有独立域名两种部署方案，彻底搞懂单Nginx多前端部署逻辑。
一、核心前置认知（重中之重）
1. Nginx 区分服务的核心逻辑
Nginx 是通过HTTP请求的 Host 请求头分发请求：
多个
server{}块可以同时监听同一个端口（80/443）Nginx 根据请求的 Host 匹配
server_name，命中对应服务配置
2. 两种部署方案核心区别
无域名、仅IP访问：只有一个固定IP，无法拆分多个
server_name，只能用单server + 多location路径区分不同前端项目有多个独立域名：可以配置多server块 + 独立server_name，域名一一对应前端项目，服务完全隔离
二、场景一：无域名、只有IP（最常用内网场景）
场景特点：服务器仅有内网IP（如192.168.251.8），无公网域名、无DNS解析，所有前端服务只能通过IP访问。
解决方案：统一一个server{}块，通过不同的location路径前缀区分不同前端项目。
1. Nginx 完整配置
所有前端项目共用同一个server_name（IP+localhost），靠路由路径区分服务：
server { listen 80; # 适配IP访问、本地localhost访问 server_name 192.168.251.8 localhost; # 主站前端：IP直接访问 location / { root /html/main; index index.html; # SPA单页路由刷新404解决方案 try_files $uri $uri/ /index.html; } # 后台管理前端：/admin 路径访问 location /admin/ { root /html; index index.html; try_files $uri $uri/ /admin/index.html; } # 用户端前端：/user 路径访问 location /user/ { root /html; index index.html; try_files $uri $uri/ /user/index.html; } }2. 目录结构规范
将多个前端打包文件按路径分类存放：
/html ├── main # 主站项目 ├── admin # 后台项目 └── user # 用户端项目3. 最终访问地址
主站：
http://192.168.251.8后台管理：
http://192.168.251.8/admin用户端：
http://192.168.251.8/user
4. 前端打包关键配置（必看，否则资源404）
路径区分的核心弊端：每个子项目必须配置对应基础路由前缀，不能用根路径/。
以 Vite 项目为例：
// 后台 admin 项目 vite.config.jsexportdefaultdefineConfig({base:'/admin/'})// 用户 user 项目 vite.config.jsexportdefaultdefineConfig({base:'/user/'})// 主站项目exportdefaultdefineConfig({base:'/'})5. 方案优缺点
✅ 优点：无需域名、无需配置DNS/hosts，单IP即可部署多个前端，适配所有内网测试环境
❌ 缺点：前端需要修改打包基础路径，多项目路由容易冲突，项目耦合度高
三、场景二：有多个独立域名（公网/正式环境）
场景特点：拥有多个域名（二级域名），所有域名均可解析到同一个Nginx服务器IP。
解决方案：配置多个独立server{}块，每个服务绑定独立server_name，服务完全隔离，无需依赖路径区分。
1. 前置准备：域名映射（核心关键）
让多个域名全部指向Nginx服务器IP192.168.251.8，两种方式：
方式1：公网环境（正式上线）
域名服务商后台配置DNS解析：
web.test.com→ 192.168.251.8admin.test.com→ 192.168.251.8user.test.com→ 192.168.251.8
方式2：内网测试（无公网DNS）
修改本机hosts文件，手动配置域名与IP映射，模拟域名解析：
Windows：
C:\Windows\System32\drivers\etc\hostsMac/Linux：
/etc/hosts
添加如下内容：
192.168.251.8 web.test.com admin.test.com user.test.com刷新本地DNS缓存后即可生效。
2. Nginx 完整配置
每个前端项目独立一个server块，互不干扰：
# 主站 web.test.com server { listen 80; server_name web.test.com; root /html/main; index index.html; try_files $uri $uri/ /index.html; } # 后台 admin.test.com server { listen 80; server_name admin.test.com; root /html/admin; index index.html; try_files $uri $uri/ /index.html; } # 用户端 user.test.com server { listen 80; server_name user.test.com; root /html/user; index index.html; try_files $uri $uri/ /index.html; }3. 最终访问地址
主站：
http://web.test.com后台：
http://admin.test.com用户端：
http://user.test.com
4. 前端打包配置
所有项目统一根路径，无需修改路由前缀，开发、打包更简单：
exportdefaultdefineConfig({base:'/'})5. 方案优缺点
✅ 优点：项目完全隔离、路由干净、无路径冲突、维护简单，是企业正式环境标准方案
❌ 缺点：需要域名支持，内网测试需手动配置hosts映射
四、两种方案核心对比总结
| 部署方案 | 适用场景 | 核心配置 | 前端打包 |
|---|---|---|---|
| IP+Location 路径区分 | 无域名、纯内网测试、单IP唯一访问入口 | 单server块，多location区分服务 | 子项目需配置 base 路径 |
| 域名+多Server块 | 有多个域名、公网上线、正式生产环境 | 多server块，独立server_name绑定域名 | 统一 base: /，无需特殊配置 |
五、最终核心结论（全文重点）
只有IP、没有任何域名时：无法使用多
server{}区分服务，只能通过同一个server + 多个location路径部署多个前端，依靠/admin、/user等前缀区分项目。拥有多个域名时：通过本地hosts/DNS解析将所有域名映射到唯一的Nginx服务器IP，再通过 Nginx 多
server{}配置、独立server_name绑定域名，实现多前端项目完全隔离部署。server_name是域名/IP匹配规则，location是路径匹配规则，单Nginx多前端的两种部署模式，本质就是这两个规则的灵活运用。
