可以，而且很常见。一台服务器跑多个前端项目，核心靠Nginx的多server块或精细化location分流，不需额外装服务、不改端口、不冲突资源；支持域名、端口、URL路径前缀三种主流区分方式，并需注意文件权限、history路由兜底、静态资源缓存及独立日志配置。

可以，而且很常见。一台服务器跑多个前端项目，核心靠 Nginx 的 多 server 块 或 精细化 location 分流，不需额外装服务、不改端口、不冲突资源。

用不同域名区分项目（推荐）

每个项目配一个独立域名（如 a.example.com、b.example.com），Nginx 通过 server_name 自动识别并路由到对应目录：

• 确保 DNS 已将两个域名都解析到该服务器 IP，或开发阶段可在本地 /etc/hosts 绑定测试
• 在 /etc/nginx/conf.d/a.conf 中写：

  server {
      listen 80;
      server_name a.example.com;
      root /usr/share/nginx/html/project-a;
      index index.html;
      location / {
          try_files $uri $uri/ /index.html;
      }
  }

• 同理，b.conf 指向 /usr/share/nginx/html/project-b，server_name 改为 b.example.com
• 重启生效：sudo nginx -t && sudo systemctl reload nginx

用不同端口区分项目（适合内网或测试）

若暂无域名，直接用端口区分最简单，比如 8080 和 8081：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 配置中去掉 server_name，只保留 listen 和 root
• 注意开放对应端口（如 sudo ufw allow 8080），防火墙别拦住
• 前端构建时需设 publicPath 或 base 为相对路径（如 "./"），避免资源 404

用 URL 路径前缀区分（单域名多项目）

所有项目共用一个域名（如 www.example.com），靠路径区分，例如：
www.example.com/app1/ → 项目一
www.example.com/app2/ → 项目二

立即学习“前端免费学习笔记（深入）”；

• 每个项目构建时必须指定 base: "/app1/"（Vite）或 publicPath: "/app1/"（Vue CLI），否则 JS/CSS 路径会错
• Nginx 配置示例：

  location /app1/ {
      alias /usr/share/nginx/html/project-a/;
      index index.html;
      try_files $uri $uri/ /app1/index.html;
  }
  location /app2/ {
      alias /usr/share/nginx/html/project-b/;
      index index.html;
      try_files $uri $uri/ /app2/index.html;
  }

• 注意：alias 结尾带斜杠，且 try_files 后的 fallback 要带前缀路径

关键细节不能漏

不管哪种方式，这几个点直接影响是否能正常访问：

• 文件权限：Nginx 进程（通常是 www-data 或 nginx 用户）必须对项目目录有读取和执行权限，建议：sudo chown -R www-data:www-data /usr/share/nginx/html/project-a
• History 路由兜底：Vue/React 项目启用 history 模式时，try_files $uri $uri/ /index.html 必须存在，否则刷新页面 404
• 静态资源缓存：加一句 expires 1y; 在 location ~ \.(js|css|png|jpg|gif)$ 块里，提升加载速度
• 日志定位问题：每个 server 块单独配 access_log 和 error_log，出问题一眼看到是哪个项目报错