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

- [1 Nginx 核心配置](#1 Nginx 核心配置)
- [2 Nginx 目录结构](#2 Nginx 目录结构)
- [3 前端配置（Vue 项目）](#3 前端配置（Vue 项目）)
- - [3.1 后台项目配置（访问路径带/manger前缀）](#3.1 后台项目配置（访问路径带/manger前缀）)
  - [3.2 前台项目配置（API请求设置）](#3.2 前台项目配置（API请求设置）)
- [4 配置说明（关键注意点，一定要看！）](#4 配置说明（关键注意点，一定要看！）)

这篇主要讲的是，前后端用同一个域名部署时，怎么通过不同路径来区分前台、后台的静态文件，还有API（Application Programming Interface，应用程序编程接口）接口。另外也会适配Vue Router的history（历史）模式，保证页面刷新、路由跳转都正常，不报错。

1 Nginx 核心配置

java 复制代码

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（协议类型）请求头设置
    }
}

2 Nginx 目录结构

下面是文件存放的目录结构，一看就懂：

Plain 复制代码

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

3 前端配置（Vue 项目）

3.1 后台项目配置（访问路径带/manger前缀）

vue.config.js 配置（给后台路径加个统一前缀/manger，和Nginx配置对应上）：

Plain 复制代码

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

router.js 配置（去掉URL（Uniform Resource Locator，统一资源定位符）里的#，设置基础路径）：

Plain 复制代码

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

3.2 前台项目配置（API请求设置）

axios 配置（给API（Application Programming Interface，应用程序编程接口）请求加个前缀/prod-api，和Nginx的代理路径对应）：

Plain 复制代码

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;

4 配置说明（关键注意点，一定要看！）

路径匹配顺序：Nginx是按location的配置顺序来匹配路径的，所以/manger（后台）和/prod-api（API，Application Programming Interface，应用程序编程接口）的配置，一定要放在/（前台）的前面。不然所有请求都会被根路径拦截，后台和API（Application Programming Interface，应用程序编程接口）就访问不到了。
Vue history模式刷新404 ：之所以加try_files配置，就是为了解决刷新页面报404的问题。前台要配成/index.html，后台要配成/manger/index.html，必须和前面设置的base路径一致，不然没用。这里的history指的是Vue Router的history（历史）模式。
proxy_pass末尾的/别删：配置API（Application Programming Interface，应用程序编程接口）代理时，proxy_pass后面的地址（比如http://localhost:8080/），末尾的/一定要保留。如果删掉，Nginx会把/prod-api这个前缀一起传给后端，要是后端接口里没有/prod-api，请求就会报错。
前后端路径要对齐：前端配置的publicPath、router.base，必须和Nginx里对应的location路径一致；axios的baseURL，也要和Nginx的API（Application Programming Interface，应用程序编程接口）代理路径一致。只要有一个对不上，就会出现访问不到页面、接口请求失败的问题。

文章结束，写作不易，喜欢就给个一键三连吧，你的肯定是我最大的动力，点赞上一千我就是脑瘫也出下章。