前后台Nginx部署同域名路径区分配置

server {
    listen 80;
    server_name nature.us.com;  # 把这个改成你自己的域名
    root /usr/local/nginx/html;
    # 前台静态文件配置（访问根路径就是前台）
    location / {
        root /usr/local/nginx/html/client;  # 前台文件存在这个文件夹里
        index index.html;
        try_files $uri $uri/ /index.html;  # 解决Vue Router的history（历史）模式刷新404的问题
    }
    # 后台静态文件配置（访问/manger路径就是后台）
    location /manger {
        alias /usr/local/nginx/html/manger;  # 后台文件存在这个文件夹里
        index index.html;
        try_files $uri $uri/ /manger/index.html;  # 后台也解决Vue Router的history（历史）模式刷新404的问题
    }
    # API（Application Programming Interface，应用程序编程接口）请求代理（访问/prod-api开头的路径，会转发到后端）
    location /prod-api/ {
        proxy_pass http://localhost:8080/;  # 改成你自己的后端服务地址，末尾的/千万别删
        proxy_set_header Host $host;  # Host（主机）请求头设置
        proxy_set_header X-Real-IP $remote_addr;  # X-Real-IP（真实IP）请求头设置
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # X-Forwarded-For（转发IP列表）请求头设置
        proxy_set_header X-Forwarded-Proto $scheme;  # X-Forwarded-Proto（协议类型）请求头设置
    }
}

nginx：
└── html：
    ├── client：  # 前台的静态文件都放这里，访问根路径就找这个文件夹
    └── manger：  # 后台的静态文件都放这里，访问/manger路径就找这个文件夹

module.exports = {
  publicPath: "/manger", // 后台所有路径都加/manger前缀，和Nginx的/manger路径匹配
}

export default new Router({
  base: "/manger",  // 基础路径和上面的publicPath一样，都是/manger
  mode: "history",  // 去掉URL（Uniform Resource Locator，统一资源定位符）里的#，这个配置需要Nginx配合上面的try_files才能用
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

import axios from 'axios'
// 创建axios实例，设置请求基础路径
export const request = axios.create({
  baseURL: "/prod-api",  // 所有API（Application Programming Interface，应用程序编程接口）请求都带/prod-api前缀，和Nginx的/prod-api路径匹配
  timeout: 5000,  // 请求超时时间，5秒没响应就报错
  headers: {
    "Content-Type": "application/json",  // Content-Type（内容类型）请求头，设置为JSON格式
  },
});
// 请求拦截器（举个例子：给请求加Token（令牌），实现登录认证）
request.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");  // 从localStorage（本地存储）拿Token（令牌）
    if (token) {
      config.headers.Authorization = ` ${token}`;  // 把Token（令牌）放到Authorization（授权）请求头里传给后端
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);  // Promise（承诺）是异步编程的解决方案，此处返回错误信息
  }
);
export default request;