Vue Router 的 history 模式 使用的是 纯前端路由，即 URL 路径（如 /about）并不对应服务器上的真实文件或目录，而是由 JavaScript 动态渲染内容

而传统 后端路由（如 PHP、Java）的 /about 可能对应一个真实的 about.php 或 about.html 文件

当用户直接访问或刷新页面时：

  1. 浏览器会向服务器请求 /about
  2. 但服务器上并没有 about 这个文件或接口
  3. Nginx 默认返回 404（因为找不到匹配的资源）

因此需要配置nginx

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

它的执行逻辑是：

  1. $uri → 先检查请求的路径是否对应真实文件（如 /about → /about.html 或 /about/index.html）

    • 如果存在，直接返回该文件
    • 如果不存在，进入下一步

  2. $uri/ → 检查请求的路径是否对应一个目录（如 /about/）

    • 如果存在，尝试返回该目录下的默认文件（如 index.html）
    • 如果不存在，进入下一步

  3. /index.html → 如果前两步都失败，最终返回 index.html

    • Vue 会解析 URL 路径（如 /about），并渲染对应的前端页面

这样，无论是直接访问 /about 还是刷新页面，Nginx 都会返回 index.html，由 Vue Router 处理路由逻辑。

最后修改：2025 年 08 月 14 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏