在Nginx同域名下部署多个Vue项目

在同一个域名下部署多个Vue项目是常见的需求，比如将管理后台和用户端部署在同一域名的不同路径下。以下是详细的配置方法：

方案一：通过不同路径区分项目

这是最常用的方法，通过URL路径来区分不同的Vue项目。

1. 项目构建配置

在每个Vue项目中，修改vue.config.js(Vue CLI)或vite.config.js(Vite)：

// 项目A (假设部署在 /admin)
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/',
  // 其他配置...
}

// 项目B (假设部署在 /app)
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/',
  // 其他配置...
}

2. Nginx配置

server {
    listen 80;
    server_name yourdomain.com;

    # 项目A - 管理后台
    location /admin {
        alias /path/to/project-a/dist;
        try_files $uri $uri/ /admin/index.html;

        # 如果使用Vite可能需要添加这些头
        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        expires off;
    }

    # 项目B - 用户端
    location /app {
        alias /path/to/project-b/dist;
        try_files $uri $uri/ /app/index.html;

        # 同上
        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        expires off;
    }

    # 默认重定向
    location / {
        return 301 /app;
    }

    # 处理静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public";
    }
}

3. 注意事项

• 使用alias而不是root，因为root会将location路径包含在内
• try_files确保Vue的路由能正常工作
• 静态资源缓存策略可以根据需求调整

方案二：通过子域名区分项目

如果需要使用子域名区分项目，配置如下：

Nginx配置

# 管理后台 - admin.yourdomain.com
server {
    listen 80;
    server_name admin.yourdomain.com;

    root /path/to/project-a/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 用户端 - app.yourdomain.com
server {
    listen 80;
    server_name app.yourdomain.com;

    root /path/to/project-b/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

方案三：使用反向代理

如果项目后端API也在同一域名下，可以使用反向代理：

server {
    listen 80;
    server_name yourdomain.com;

    # 项目A
    location /admin {
        alias /path/to/project-a/dist;
        try_files $uri $uri/ /admin/index.html;
    }

    # 项目B
    location /app {
        alias /path/to/project-b/dist;
        try_files $uri $uri/ /app/index.html;
    }

    # API代理
    location /api/admin {
        proxy_pass http://admin-backend;
        # 其他代理配置...
    }

    location /api/app {
        proxy_pass http://app-backend;
        # 其他代理配置...
    }
}

常见问题解决

1. 路由404问题：

   • 确保每个location块都有try_files $uri $uri/ /path/to/index.html
   • Vue Router应使用history模式

2. 静态资源加载失败：

   • 检查publicPath配置是否正确
   • 确保Nginx有权限访问静态文件

3. CSS/JS路径错误：

   • 构建时使用相对路径
   • 检查Nginx的alias或root配置

4. 跨域问题：

   • 如果API在不同域名，配置CORS
   • 或者使用Nginx反向代理统一域名

最佳实践

1. 为每个项目使用独立的构建目录
2. 配置适当的缓存策略
3. 使用HTTPS增强安全性
4. 考虑使用Docker容器化部署
5. 设置适当的日志记录和监控

通过以上配置，你可以在同一Nginx服务器上高效地托管多个Vue项目，同时保持良好的性能和可维护性。