宝塔nginx一个域名部署两个前端和两个后端（VUE3）

背景

域名只有一个，服务器只有一个，域名已经配置https证书，默认访问443端口，需要将两个前端和两个后端部署在一台服务器上，访问url定义如下。

移动后端访问地址：https://example.com/api/java/\*\*\*

移动前端访问地址：https://example.com/mobile-web/

管理前端访问地址：https://example.com/

管理后端访问地址：https://example.com/api/\*\*

管理端前端 无需做特殊处理，直接使用【Ip:端口】即可访问，若需加前缀才能访问，则不符合此文条件。

管理端后端需设置访问前缀【/api/】，任何请求都需加前缀才能访问成功。

移动端前端打包前设置。vue.config.js中设置

TypeScript 复制代码

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/mobile-web/',//项目访问前缀
})

TypeScript 复制代码

import { createRouter, createWebHistory,  } from 'vue-router'
import routes from "@/router/routes";

const router = createRouter({
  //前端前缀 '/mobile-web/'
  history: createWebHistory('/mobile-web/'),//路由前缀,若是VUE2则设置base属性
  routes,
})

注意是createWebHistory方法，而不是createWebHashHistory方法，本人为此找了很久问题。重新启动后再访问，所有url都会带前缀，则正确。

移动后端访问前缀设置

TypeScript 复制代码

spring:
  application:
    name: pbrh-mobile-server
  profiles:
    active: prod
server:
    servlet:
      #设置访问上下文路径
      context-path: /api/java 
    port: 8088

宝塔NGINX设置

网站------》添加html项目，输入域名

创建完成后点开域名，打开配置文件，根据需要更改配置。

TypeScript 复制代码

    #移动端后端
    location /api/java/ {
      proxy_pass      http://127.0.0.1:8088/api/java/; # 转发移动端后端程序
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_redirect off;
    }
    #管理端后端
    location /api/ {
      proxy_pass      http://127.0.0.1:8000/api/; # 转发管理端后端程序
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_redirect off;
    }
    #移动端前端
    location /mobile-web/ {
      alias /www/wwwroot/example.com/;#dist中的内容赋值至此处
      try_files $uri $uri/ /mobile-web/index.html; # h5 history模式需要这样写
    }
   
    #管理端前端访问
    location / {
      root /www/wwwroot/example.com;#dist中的内容赋值至此处
      try_files $uri $uri/ /index.html; # h5 history模式需要这样写
    }

重启nginx服务.