同端口部署多个前端服务的实现方法-优快云博客

🚀 同端口部署多个前端服务的实现方法这里以Vue为例

在生产环境中，有时我们需要在 同一个服务器端口 上部署多个前端项目，例如：

不同业务模块的前端服务共用同一域名；
测试环境统一端口管理；
前后端集成部署方便。

本文介绍几种常见实现方式及 Vue 项目的必要配置。

🧱 一、使用反向代理（Nginx/Apache）

通过反向代理服务器（如 Nginx 或 Apache）配置不同路径或子域名指向不同前端服务。
以下以 Nginx 为例：

server {
    listen 80;
    server_name example.com;

    location /app1 {
        alias /path/to/app1/dist;
        try_files $uri $uri/ /app1/index.html;
    }

    location /app2 {
        alias /path/to/app2/dist;
        try_files $uri $uri/ /app2/index.html;
    }
}

此配置将 /app1 和 /app2 分别映射到两个独立的前端项目目录。

⚠️ 注意：需确保前端项目的静态资源路径正确处理（如设置 publicPath）。

🌐 二、基于子域名路由

通过 DNS 解析和服务器配置实现不同子域名指向不同服务：

server {
    listen 80;
    server_name app1.example.com;
    root /path/to/app1/dist;
    try_files $uri $uri/ /index.html;
}

server {
    listen 80;
    server_name app2.example.com;
    root /path/to/app2/dist;
    try_files $uri $uri/ /index.html;
}

需在 DNS 管理中添加：

app1.example.com → 服务器IP
app2.example.com → 服务器IP

🐳 三、容器化部署（Docker）

使用 Docker Compose 部署多个容器，通过 Nginx 统一暴露端口。

version: '3'
services:
  nginx:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
  app1:
    build: ./app1
  app2:
    build: ./app2

Nginx 配置中通过 proxy_pass 将请求转发到不同容器。

⚙️ 四、前端路由与构建路径配置

对于 单页应用（SPA），需要正确设置构建路径与路由前缀，否则页面刷新会出现 404 错误。

1️⃣ Vue CLI 项目（Vue 2）

在 vue.config.js 中设置：

module.exports = {
  publicPath: '/app1/', // 与部署路径保持一致
  outputDir: 'dist'
}

在 src/router/index.js 中修改：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history', // 或 'hash'
  base: '/app1/',  // 👈 部署路径（关键）
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about', name: 'about', component: () => import('@/views/About.vue') }
  ]
})

如果项目部署在 /app2 下，则改为 base: '/app2/'
若使用 Hash 模式（mode: 'hash'），可避免服务器端路径匹配问题。

2️⃣ Vue 3 项目（Vite 或 Vue Router 4）

在 vite.config.js 中设置：

export default defineConfig({
  base: '/app1/'
})

在 src/router/index.js 中修改：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory('/app1/'), // 👈 与部署路径一致
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: () => import('@/views/About.vue') }
  ]
})

export default router

🧩 五、注意事项

项目	配置项	示例
Nginx	`location /app1` + `alias`	映射到独立目录
Vue Router	`base` 或 `createWebHistory('/app1/')`	保持一致
Vue 构建配置	`publicPath` 或 `base`	对应 `/app1/`
访问地址	`http://localhost/app1/`	访问路径

🔒 六、生产环境优化建议

✅ 静态资源路径需正确处理，避免 404
✅ 浏览器路由需与代理配置匹配（HashRouter 或 MemoryRouter 可避免此问题）
✅ 启用 HTTPS 并配置 HTTP/2 提升性能
✅ 对于动态端口或实时通信需求，可考虑使用 WebSocket 或 SSE

🧭 七、小结

目标	关键配置
同端口部署多个前端	使用 Nginx 反向代理
各项目路由独立	设置 Vue Router `base`
资源路径正确加载	配置 `publicPath` / `base`
页面刷新无 404	`try_files` 指向正确 index.html