免责申明

记录用，本人主要是后端,可能理解有误

Vue.js 是一个前端框架，主要用于构建单页面应用程序（SPA）。然而，Nginx 是一个服务器端的应用程序，负责处理 HTTP 请求并返回相应的资源。

当在 Vue.js 应用程序中使用 history 模式的路由时，浏览器会尝试访问实际不存在的 URL（因为所有的 JavaScript 文件都在一个入口点，通常是 /index.html），而 Nginx 则需要配置来处理这种情况。

以下是如何让 Nginx 处理 Vue.js 应用程序中的历史模式路由：

总结一下

Nginx 的 try_files 配置是为了处理 Vue.js 应用程序的历史模式路由，而不是真正根据 URL 返回不同的 HTML 文件。它的作用是将所有请求重定向到同一个入口点（即 /index.html），然后由 Vue Router 在客户端处理 URL 变更。这样可以让应用程序看起来像多页面应用，但实际上仍然是一个单页面应用。

1. Nginx 配置： 当您在 Nginx 中添加 try_files 指令时，它告诉 Nginx 如果请求的 URI 存在，则尝试查找该目录下的 index.html 文件。如果没有找到，它将回退到根目录下的 index.html。这是为了让 Nginx 将所有请求重定向到 Vue.js 应用程序的主入口点，从而让前端路由接管并解析 URL。

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

2. 前端路由： Vue.js 使用 history 模式时，URL 改变并不会触发页面刷新，而是由前端路由处理器捕获并解析 URL。由于 Nginx 已经将所有请求重定向到了 /index.html，所以 Vue Router 可以接收到 URL 并根据其内容决定显示哪个组件。

    

   这样做的目的是避免出现 404 错误，同时让 Vue.js 应用程序能够正确处理 URL 变化。

3. 客户端渲染： 当用户导航到一个新的 URL 时，Vue Router 会根据配置的路由映射加载相应的组件，并在浏览器中动态更新视图。这个过程完全在客户端完成，不需要向服务器发送额外的请求。

让我们分解 try_files $uri $uri/ /index.html; 这一行配置：

• $uri：这是请求的 URI（统一资源标识符），即用户请求的 URL 路径部分。
• $uri/：如果 $uri 是一个目录，那么这个参数会尝试找到该目录下的默认索引文件（通常是 index.html 或 index.php 等）。
• /index.html：如果前两个选项都失败了，Nginx 将返回根目录下的 index.html 文件。

逐步解析

1. 尝试直接匹配请求的 URI：

   • 如果请求的是一个实际存在的文件（例如 /about.html），Nginx 会直接返回这个文件。
   • 如果请求的是一个目录（例如 /images/），Nginx 会尝试找到该目录下的默认索引文件（如 index.html）。

2. 尝试作为目录处理：

   • 如果第一步没有找到文件，并且请求的 URI 看起来像是一个目录（例如 /images），Nginx 会尝试添加斜杠并查找该目录下的默认索引文件（如 /images/index.html）。

3. 最后返回根目录下的 index.html：

   • 如果前两步都没有成功，Nginx 会返回根目录下的 index.html 文件。这对于单页面应用程序（SPA）特别有用，因为它允许前端路由来处理 URL 并渲染相应的视图。

对于 Vue.js SPA 应用程序的意义

对于使用 Vue Router 并启用了 history 模式的 Vue.js 应用程序，浏览器中的 URL 可能看起来像 /users/123，但实际上服务器上并没有这样的物理路径。如果没有正确的 Nginx 配置，这样的请求会导致 404 错误。

通过使用 try_files $uri $uri/ /index.html;，Nginx 会将所有这些请求重定向到 index.html，然后由 Vue Router 来处理这些 URL 并显示适当的内容。这样，无论用户访问的是什么 URL，只要它们是有效的前端路由，都会被正确地处理而不会产生 404 错误。