Nginx同端口部署多个vue以及unapp项目

2026-04-07 08:42:01发布 2次浏览

详情描述

路径区分或域名区分来实现。以下是两种方案的详细配置：

方案一：通过路径区分（推荐）

项目准备

假设两个项目：

项目1：vue-project，访问路径为 /vue
项目2：uni-app-project，访问路径为 /uniapp

Nginx 配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/html;

    # Vue项目配置 - 访问路径: /vue
    location /vue {
        alias /var/www/vue-project/dist/;
        try_files $uri $uri/ /vue/index.html;

        # 静态文件缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # uni-app项目配置 - 访问路径: /uniapp
    location /uniapp {
        alias /var/www/uni-app-project/dist/;
        try_files $uri $uri/ /uniapp/index.html;

        # 静态文件缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # 默认首页（可选）
    location / {
        root /var/www/default/;
        index index.html;
    }

    # 错误页面
    error_page 404 /404.html;
    location = /404.html {
        root /var/www/errors/;
    }
}

项目部署步骤

构建项目时修改基础路径

Vue项目（vue.config.js）：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',
  // 其他配置...
}

uni-app项目（通过 @vue/cli）：

// 在vue.config.js中
module.exports = {
  publicPath: '/uniapp/',
  // 其他配置...
}

构建并部署

# 构建项目
npm run build

# 复制到nginx目录
cp -r dist /var/www/vue-project/

方案二：通过子域名区分

Nginx 配置示例

# Vue项目 - vue.your-domain.com
server {
    listen 80;
    server_name vue.your-domain.com;

    root /var/www/vue-project/dist;
    index index.html;

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

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

# uni-app项目 - uniapp.your-domain.com
server {
    listen 80;
    server_name uniapp.your-domain.com;

    root /var/www/uni-app-project/dist;
    index index.html;

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

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

方案三：使用正则匹配的动态路由

适用于项目较多的情况：

server {
    listen 80;
    server_name your-domain.com;

    # 通用配置
    set $project_root /var/www;

    # 匹配 /app1/xxx, /app2/xxx 等路径
    location ~ ^/([^/]+)/(.*)$ {
        alias $project_root/$1/dist/$2;
        try_files $uri $uri/ /$1/index.html;

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

    # 默认路由
    location / {
        root $project_root/default;
        index index.html;
    }
}

完整配置示例（推荐）

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 日志格式
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    # 性能优化
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    client_max_body_size 100M;

    # Gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/javascript application/xml+rss 
               application/json image/svg+xml;

    server {
        listen 80;
        server_name localhost;
        charset utf-8;

        # Vue项目 - /vue
        location /vue {
            alias /var/www/vue-project/dist/;
            index index.html;

            # SPA路由支持
            try_files $uri $uri/ /vue/index.html;

            # 静态资源缓存
            location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
                expires 1y;
                add_header Cache-Control "public, immutable";
                access_log off;
            }
        }

        # uni-app项目 - /uniapp
        location /uniapp {
            alias /var/www/uni-app-project/dist/;
            index index.html;

            # SPA路由支持
            try_files $uri $uri/ /uniapp/index.html;

            # 静态资源缓存
            location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
                expires 1y;
                add_header Cache-Control "public, immutable";
                access_log off;
            }
        }

        # 监控检查
        location /health {
            access_log off;
            return 200 "healthy\n";
            add_header Content-Type text/plain;
        }

        # 默认页面
        location = / {
            root /var/www/html;
            index index.html;
        }

        # 错误页面
        error_page 404 /404.html;
        location = /404.html {
            root /var/www/html;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /var/www/html;
        }
    }
}

部署脚本示例

#!/bin/bash
# deploy.sh - 一键部署脚本

# 项目1: Vue项目
echo "构建Vue项目..."
cd /path/to/vue-project
npm install
npm run build
sudo cp -r dist/* /var/www/vue-project/

# 项目2: uni-app项目
echo "构建uni-app项目..."
cd /path/to/uni-app-project
npm install
npm run build:h5
sudo cp -r dist/build/h5/* /var/www/uni-app-project/

# 重新加载nginx
echo "重新加载Nginx配置..."
sudo nginx -t && sudo systemctl reload nginx

echo "部署完成！"
echo "访问地址："
echo "Vue项目: http://your-domain.com/vue"
echo "uni-app项目: http://your-domain.com/uniapp"

常见问题解决

1. 路由404问题

确保每个项目的 try_files 配置正确指向对应的 index.html

2. 静态资源加载失败

检查 publicPath 配置是否正确
确保资源路径包含子路径前缀
查看浏览器控制台报错信息

3. 跨域问题（如果需要API代理）

location /vue/api/ {
    proxy_pass http://api-server/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

4. 缓存问题

开发环境下可以禁用缓存：

location /vue {
    # 开发环境禁用缓存
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

验证配置

# 检查配置文件语法
nginx -t

# 重新加载配置
nginx -s reload  # 或 systemctl reload nginx

# 查看运行状态
systemctl status nginx

这种配置方式可以让多个前端项目共享同一个端口，通过不同的路径进行访问，便于管理和维护。