免责申明
记录用，本人主要是后端,可能理解有误
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 变更。这样可以让应用程序看起来像多页面应用，但实际上仍然是一个单页面应用。
-
Nginx 配置： 当您在 Nginx 中添加
try_files指令时，它告诉 Nginx 如果请求的 URI 存在，则尝试查找该目录下的index.html文件。如果没有找到，它将回退到根目录下的index.html。这是为了让 Nginx 将所有请求重定向到 Vue.js 应用程序的主入口点，从而让前端路由接管并解析 URL。location / { try_files $uri $uri/ /index.html; } -
前端路由： Vue.js 使用 history 模式时，URL 改变并不会触发页面刷新，而是由前端路由处理器捕获并解析 URL。由于 Nginx 已经将所有请求重定向到了
/index.html，所以 Vue Router 可以接收到 URL 并根据其内容决定显示哪个组件。这样做的目的是避免出现 404 错误，同时让 Vue.js 应用程序能够正确处理 URL 变化。
-
客户端渲染： 当用户导航到一个新的 URL 时，Vue Router 会根据配置的路由映射加载相应的组件，并在浏览器中动态更新视图。这个过程完全在客户端完成，不需要向服务器发送额外的请求。
让我们分解 try_files $uri $uri/ /index.html; 这一行配置：
$uri：这是请求的 URI（统一资源标识符），即用户请求的 URL 路径部分。$uri/：如果$uri是一个目录，那么这个参数会尝试找到该目录下的默认索引文件（通常是index.html或index.php等）。/index.html：如果前两个选项都失败了，Nginx 将返回根目录下的index.html文件。
逐步解析
-
尝试直接匹配请求的 URI：
- 如果请求的是一个实际存在的文件（例如
/about.html），Nginx 会直接返回这个文件。 - 如果请求的是一个目录（例如
/images/），Nginx 会尝试找到该目录下的默认索引文件（如index.html）。
- 如果请求的是一个实际存在的文件（例如
-
尝试作为目录处理：
- 如果第一步没有找到文件，并且请求的 URI 看起来像是一个目录（例如
/images），Nginx 会尝试添加斜杠并查找该目录下的默认索引文件（如/images/index.html）。
- 如果第一步没有找到文件，并且请求的 URI 看起来像是一个目录（例如
-
最后返回根目录下的
index.html：- 如果前两步都没有成功，Nginx 会返回根目录下的
index.html文件。这对于单页面应用程序（SPA）特别有用，因为它允许前端路由来处理 URL 并渲染相应的视图。
- 如果前两步都没有成功，Nginx 会返回根目录下的
对于 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 错误。
