server{
	listen       80;
	listen 443 ssl;
    server_name  www.xxx.com;

	location /YH-LX001B {
    	try_files $uri $uri/ /YH-LX001B/index.html;
	}
}

$uri 和 $uri/ 的作用

“保障静态资源（CSS, JS, 图片等）能够被正常访问

当一个浏览器访问你的单页面应用时，会发生以下步骤：

  1. 浏览器请求 /YH-LX001B/ -> Nginx 返回 index.html。
  2. index.html 文件被浏览器解析，它里面包含了链接去请求各种静态资源，比如：
    • <script src=“js/app.js”>
    • <link href=“css/style.css”>
  3. 浏览器会向服务器发起新的请求：
    • GET /YH-LX001B/js/app.js
    • GET /YH-LX001B/css/style.css

正确的流程是怎样的？

有了完整的 try_files $uri $uri/ /YH-LX001B/index.html;，流程是这样的：

  1. 请求 /YH-LX001B/js/app.js:
    • $uri -> Nginx 在网站根目录下寻找 /YH-LX001B/js/app.js 这个文件。
    • 找到了！ 于是 Nginx 停止尝试，直接将这个正确的 JavaScript 文件发送给浏览器。✅
  2. 请求 /YH-LX001B (一个目录):
    • $uri -> 寻找名为 YH-LX001B 的文件，没找到。
    • $uri/ -> 寻找名为 YH-LX001B/ 的目录，找到了。
    • Nginx 会默认寻找这个目录下的索引文件（如 index.html），并返回它。✅
  3. 请求 /YH-LX001B/settings (一个前端路由):
    • $uri -> 寻找名为 settings 的文件，没找到。
    • $uri/ -> 寻找名为 settings/ 的目录，也没找到。
    • 最终 fallback 到 /YH-LX001B/index.html，Nginx 返回这个文件。
    • 浏览器拿到 index.html 后，由前端的路由器（Vue Router/React Router）解析 URL 中的 /settings 并显示对应的页面。✅