Nginx系列---【前端页面直接访问ip端口没问题，打开后刷新路由就报404】

1.问题

直接访问http://192.168.xx.xxx，网页正常显示，默认进入http://192.168.xx.xxx/index,再刷新http://192.168.xx.xxx/index报404，console报GET http://192.168.xx.xxx/index 404 (Not Found)

2.原因分析

这是一个非常典型的 单页应用（SPA, Single Page Application）部署后的路由配置问题。
通常发生在 Vue (Vue Router)、React (React Router) 或 Angular 等前端框架使用 history 模式部署到 Nginx 或 Apache 服务器时。
SPA 的机制： 单页应用只有一个真实的 HTML 文件（通常是 index.html）。当你访问根路径 / 时，服务器返回 index.html，然后前端 JS 脚本接管页面，通过修改浏览器 URL（如跳转到 /index）来模拟页面切换，而实际上并没有向服务器发送请求。
刷新的问题： 当你在浏览器地址栏已经是 /index 时点击刷新，浏览器会直接向服务器请求 http://192.168.xx.xxx/index 这个文件。
服务器的反应： 服务器（如 Nginx）在文件系统中查找名为 index 的文件或文件夹，发现找不到，于是返回 404 Not Found 错误。

3.解决方案

你需要修改你的 Web 服务器配置，告诉它：“无论用户请求什么路径，如果找不到对应的静态文件，就统统返回 index.html，把路由控制权交还给前端代码。”

以下是针对主流服务器的配置方法：

1. Nginx 配置（最常见）
   找到你的 Nginx 配置文件（通常在 nginx.conf 或 conf.d/default.conf 中），在对应的 location / 块中添加 try_files 指令。

server {
    listen       80;
    server_name  192.168.xx.xxx;

    location / {
        root   /usr/share/nginx/html; # 你的项目打包文件存放目录
        index  index.html index.htm;
        
        # 关键配置在这里：
        # 尝试查找对应的文件($uri)，找不到就找对应的目录($uri/)，
        # 如果都找不到，就重定向回 /index.html
        try_files $uri $uri/ /index.html; 
    }
}

改完记得重启nginx

nginx -s reload