Vue Router History 模式在 Nginx 非根路径下的配置指南

Vue Router History 模式概述

Vue Router 默认采用 Hash 模式，该模式利用 URL 中的 hash 值（即 # 符号后的部分）来模拟完整的访问地址。当 URL 发生变化时，页面内容不会重新加载，从而提升用户体验。

出于对 URL 美观度的考虑，通常不建议使用带有 hash 值的 URL 格式（例如 index.html#/matchResult）。此时，可以切换至路由的 History 模式。该模式基于 HTML5 的 history.pushState API 实现页面跳转，能够生成更简洁、自然的 URL 结构。

然而，在采用 History 模式后，若使用 Nginx 作为服务器，必须进行相应的配置调整，否则用户直接访问子页面或刷新页面时可能会遇到 404 错误。

根路径下的 Nginx 配置

首先介绍将应用直接部署在服务器根路径下的配置方法。

当应用部署在根路径时，用户只需访问域名（如 http://yoursite.com）即可。此时，Nginx 的配置应确保所有请求最终都指向 index.html，具体配置如下所示。

location / {
 try_files $uri $uri/ /index.html;
}

非根路径下的 Nginx 配置

接下来讨论非根路径的配置场景。

如果同一个域名下托管了多个项目，直接部署在根路径下会导致路径冲突。因此，需要在根路径下划分特定的子路径来区分不同项目，例如为项目 A 指定路径 /A，为项目 B 指定路径 /B。

以项目 A 为例。

其访问地址为 http://yoursite.com/A。

以项目 B 为例。

其访问地址为 http://yoursite.com/B。

针对上述非根路径场景，Nginx 的配置需要分别处理各个子路径的请求映射。

  location ^~/A {
      alias /XX/A;//此处为A的路径
      index index.html;
      try_files $uri $uri/ /A/index.html;
  }
  location ^~/B {
      alias /XX/B;//此处为B的路径
      index index.html;
      try_files $uri $uri/ /B/index.html;
  }

注意：在配置非根路径时，务必使用 alias 指令而不是 root 指令。使用 root 可能导致文件路径解析错误，而 alias 能更准确地指向实际的物理目录。

以上即为 Vue Router 配合 Nginx 进行非根路径配置的核心内容，希望能为相关开发工作提供参考。