vue下使用nginx刷新页面404的问题解决

部署问题

问题为：由于项目中使用的vue router 项目直接使用node环境部署项目，在同一个路由如: 192.168.11.30:/home刷新浏览器正常 nginx部署刷新不出现404 /nginx not found 如何解决？

出现原因

当使用前端路由时，如果是直接访问特定路径，例如 http://baidu.com/home，浏览器中的前端路由会正确解析这个路径并显示对应的页面，因为JavaScript路由库知道如何处理它。然而，如果你刷新页面，或者直接在地址栏中输入URL，服务器会尝试查找与该路径匹配的实际文件，但在SPA中，通常没有与每个路由路径相对应的独立HTML文件，因此服务器会返回404错误

解决方案

解决这个问题，需要修改配置Nginx，以便对所有请求都返回应用的入口点（通常是 index.html）。这样，不管浏览器中的路径是什么，服务器都会返回相同的index.html。一旦浏览器加载了这个HTML文件，前端路由库会根据URL来呈现正确的页面内容.

它解决了前端路由在SPA中的刷新问题，让SPA应用可以在不同的路由之间无缝导航

问题解决

当使用Vue Router时，前端路由是在客户端进行处理的，而Nginx作为反向代理服务器默认只处理静态文件的请求 这就是为什么直接访问 xxx.xxx.xxx.xxx:/home 时正常工作，但刷新页面时会出现404错误的原因。

使用通配符来配置Nginx，以使其将所有路由请求都指向Vue应用的 index.html，确保所有的路由请求都交给Vue Router处理

server {
    listen       80;
    server_name  demo;
    
    location / {
        
        # 配置让Vue Router处理路由
        try_files $uri $uri/ /index.html; 
    }
}