前后台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;