nginx部署多套vue項(xiàng)目,共用一套后端配置過程

更新時(shí)間：2025年12月25日 10:05:53 作者：客官酒來了

文章介紹了如何在一套后端服務(wù)下部署多個(gè)Web應(yīng)用,包括H5頁(yè)面和后臺(tái)管理端的配置方法,涵蓋了前端打包、路由配置、Java打包、Nginx配置以及訪問路徑的設(shè)置

1.H5打包配置

baseUrl: ‘https://www.xxxx.com/prod-api’,后端請(qǐng)求地址

2.后臺(tái)管理端打包

修改vue.config.js

index.js 修改Router路由 base路徑（看項(xiàng)目用法）

3.修改java打包方式

context-path: /prod-api

4.配置nginx文件

nginx配置 nginx.conf配置文件

server {
listen 80;

    server_name  www.xxxx.com;  # 直接使用 IP 或替換為域名
    
    rewrite ^/(.*) https://$server_name/$1 permanent;    # http強(qiáng)制跳轉(zhuǎn)到https
}

server {
    listen 443 ssl;
    server_name  www.xxxx.com;  # 直接使用 IP 或替換為域名
    
    ssl_certificate  /etc/nginx/cert/server.crt;  # 證書文件路徑
    ssl_certificate_key /etc/nginx/cert/server.key;  # 私鑰文件路徑
    
    ssl_verify_depth             1;
    keepalive_timeout            70;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
    
    #讓http請(qǐng)求重定向到https請(qǐng)求  
    error_page 497  https://$host$uri?$args; 
    
    # 代理H5前端
    location / {
            root   /data/web;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
    #圖片顯示
    location /profile/ {
      proxy_pass http://127.0.0.1:8181/profile/;
    }
    # 代理管理端
    location /admin  {
            alias   /data/dist/;
            try_files $uri $uri/ /admin/index.html;
            index  index.html index.htm;
        }
 
    # 代理后端 API
    location /prod-api {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8181;
    }
    
    
}