server {
    listen 80;
    server_name nature.us.com;  # 把這個(gè)改成你自己的域名
    root /usr/local/nginx/html;
    # 前臺(tái)靜態(tài)文件配置（訪問根路徑就是前臺(tái)）
    location / {
        root /usr/local/nginx/html/client;  # 前臺(tái)文件存在這個(gè)文件夾里
        index index.html;
        try_files $uri $uri/ /index.html;  # 解決Vue Router的history（歷史）模式刷新404的問題
    }
    # 后臺(tái)靜態(tài)文件配置（訪問/manger路徑就是后臺(tái)）
    location /manger {
        alias /usr/local/nginx/html/manger;  # 后臺(tái)文件存在這個(gè)文件夾里
        index index.html;
        try_files $uri $uri/ /manger/index.html;  # 后臺(tái)也解決Vue Router的history（歷史）模式刷新404的問題
    }
    # API（Application Programming Interface，應(yīng)用程序編程接口）請(qǐng)求代理（訪問/prod-api開頭的路徑，會(huì)轉(zhuǎn)發(fā)到后端）
    location /prod-api/ {
        proxy_pass http://localhost:8080/;  # 改成你自己的后端服務(wù)地址，末尾的/千萬別刪
        proxy_set_header Host $host;  # Host（主機(jī)）請(qǐng)求頭設(shè)置
        proxy_set_header X-Real-IP $remote_addr;  # X-Real-IP（真實(shí)IP）請(qǐng)求頭設(shè)置
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # X-Forwarded-For（轉(zhuǎn)發(fā)IP列表）請(qǐng)求頭設(shè)置
        proxy_set_header X-Forwarded-Proto $scheme;  # X-Forwarded-Proto（協(xié)議類型）請(qǐng)求頭設(shè)置
    }
}

nginx：
└── html：
    ├── client：  # 前臺(tái)的靜態(tài)文件都放這里，訪問根路徑就找這個(gè)文件夾
    └── manger：  # 后臺(tái)的靜態(tài)文件都放這里，訪問/manger路徑就找這個(gè)文件夾

module.exports = {
  publicPath: "/manger", // 后臺(tái)所有路徑都加/manger前綴，和Nginx的/manger路徑匹配
}

export default new Router({
  base: "/manger",  // 基礎(chǔ)路徑和上面的publicPath一樣，都是/manger
  mode: "history",  // 去掉URL（Uniform Resource Locator，統(tǒng)一資源定位符）里的#，這個(gè)配置需要Nginx配合上面的try_files才能用
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

import axios from 'axios'
// 創(chuàng)建axios實(shí)例，設(shè)置請(qǐng)求基礎(chǔ)路徑
export const request = axios.create({
  baseURL: "/prod-api",  // 所有API（Application Programming Interface，應(yīng)用程序編程接口）請(qǐng)求都帶/prod-api前綴，和Nginx的/prod-api路徑匹配
  timeout: 5000,  // 請(qǐng)求超時(shí)時(shí)間，5秒沒響應(yīng)就報(bào)錯(cuò)
  headers: {
    "Content-Type": "application/json",  // Content-Type（內(nèi)容類型）請(qǐng)求頭，設(shè)置為JSON格式
  },
});
// 請(qǐng)求攔截器（舉個(gè)例子：給請(qǐng)求加Token（令牌），實(shí)現(xiàn)登錄認(rèn)證）
request.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");  // 從localStorage（本地存儲(chǔ)）拿Token（令牌）
    if (token) {
      config.headers.Authorization = ` ${token}`;  // 把Token（令牌）放到Authorization（授權(quán)）請(qǐng)求頭里傳給后端
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);  // Promise（承諾）是異步編程的解決方案，此處返回錯(cuò)誤信息
  }
);
export default request;