如何用Nginx在单台Linux服务器部署多Vite构建的Vue SPA路由应用

针对单后端配合两个Vite构建的Vue SPA场景，要实现完整路由功能（含路径参数、查询参数、元数据、命名路由等），核心是通过Nginx做路由分发与SPA history模式适配，以下是具体实现步骤：

1. 调整Vue项目路由与构建配置 #

每个SPA需设置独立的路由基准路径，避免资源与路由冲突：

路由配置（以Vue3 + Vue Router为例） #

修改项目的路由文件，指定createWebHistory的基准路径：

// app1/src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  // 示例路由：包含路径参数、命名路由、元数据
  {
    path: '/user/:userId',
    name: 'UserProfile',
    component: () => import('../views/UserProfile.vue'),
    meta: { requiresAuth: true, title: '用户主页' }
  },
  // 其他路由规则...
]

const router = createRouter({
  history: createWebHistory('/app1/'), // 对应Nginx的location路径
  routes
})

export default router

Vite构建配置 #

在vite.config.js中设置打包基准路径，确保静态资源路径正确：

// app1/vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/app1/' // 与路由基准路径保持一致
})

第二个项目app2只需将基准路径改为/app2/即可，其他配置逻辑相同。

2. 打包并部署静态文件 #

分别对两个Vue项目执行打包命令：

npm run build

将打包生成的dist文件夹重命名为app1-dist和app2-dist，上传至Linux服务器的静态目录（如/var/www/html/），最终目录结构如下：

/var/www/html/
├── app1-dist/  # app1的静态资源
└── app2-dist/  # app2的静态资源

3. 配置Nginx实现路由分发与SPA适配 #

Nginx是核心，需完成三个关键任务：分发不同SPA的请求、处理history模式路由、转发后端API请求。

编辑Nginx配置文件（如/etc/nginx/sites-available/default），添加以下配置：

server {
    listen 80;
    server_name your-domain.com; # 替换为你的域名或服务器IP

    # 处理app1的请求
    location /app1/ {
        root /var/www/html;
        alias /var/www/html/app1-dist/; # 指定app1的静态资源目录
        try_files $uri $uri/ /app1/index.html; # history模式：找不到文件时返回index.html
    }

    # 处理app2的请求
    location /app2/ {
        root /var/www/html;
        alias /var/www/html/app2-dist/;
        try_files $uri $uri/ /app2/index.html;
    }

    # 转发所有API请求到后端服务
    location /api/ {
        proxy_pass http://localhost:3000/; # 替换为你的后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 可选：根路径重定向到默认应用
    location = / {
        return 302 /app1/;
    }
}

配置说明 #

• alias指令：精准指向对应SPA的静态资源目录，避免路径拼接错误。
• try_files：解决history模式下刷新页面404的问题，所有未匹配到静态文件的请求都返回SPA的index.html，由Vue Router处理路由逻辑。
• API转发：所有/api/开头的请求统一转发到后端，避免跨域问题，同时简化前端API地址配置。

4. 验证与重启服务 #

1. 检查Nginx配置语法是否正确：

nginx -t

2. 重启Nginx使配置生效：

systemctl restart nginx

3. 测试路由功能：访问http://your-domain.com/app1/user/1001?tab=info，应正常加载对应路由组件，路径参数userId、查询参数tab可通过$route正常获取，路由元数据也能在路由守卫中读取。

注意事项 #

• 确保服务器静态目录权限正确，给Nginx进程授权：

chown -R www-data:www-data /var/www/html/

• 若需HTTPS，只需在Nginx配置中添加SSL证书相关配置，核心路由逻辑无需改动。
• 两个SPA的路由基准路径需唯一，避免Nginx匹配冲突。

内容的提问来源于stack exchange，提问作者Dorialean