使用nginx方向代理部署Vue项目刷新页面404的问题解决

冷不防 2024-02-21 10:25 64阅读 0赞

#### 文章目录 ####

*  问题假设
 *  原理探究
 *  问题解决

## 问题假设 ##

*  部署出现的问题为：由于项目中使用的vue router 项目直接使用node环境部署项目，在同一个路由如: 192.168.1.30:/home刷新浏览器正常 nginx部署刷新不出现404 /nginx not found 如何解决？
 *  以下是我的想法：似乎是nginx代理使其直接访问文件，而没有使项目的路由生效从而正确加载资源

## 原理探究 ##

这种Nginx配置背后的原理涉及到前端路由和服务器的工作方式。

1.  前端路由：
    
     *  在前端开发中，SPA（Single Page Application）应用程序使用前端路由来实现页面切换和导航。
     *  前端路由是在浏览器中处理的，而不是通过传统的页面请求和刷新。
     *  SPA应用通常使用JavaScript库或框架（如Vue Router、React Router等）来管理前端路由。
     *  这些路由库允许应用程序的不同路径映射到不同的组件或页面。
2.  服务器处理：
    
     *  当浏览器发出请求时，Web服务器（如Nginx）会根据请求的路径来定位并返回相应的资源或页面。
     *  在传统的Web应用中，服务器会查找匹配的HTML文件并将其发送给浏览器。然而，在SPA中，服务器通常只返回应用的入口点（例如，index.html），而所有的路由和页面切换是在浏览器中通过前端路由进行管理的。
3.  问题的根本：
    
     *  当使用前端路由时，如果你直接访问特定路径，例如 `http://example.com/home`，浏览器中的前端路由会正确解析这个路径并显示对应的页面，因为JavaScript路由库知道如何处理它。然而，如果你刷新页面，或者直接在地址栏中输入URL，服务器会尝试查找与该路径匹配的实际文件，但在SPA中，通常没有与每个路由路径相对应的独立HTML文件，因此服务器会返回404错误。
4.  解决方案：
    
     *  为了解决这个问题，需要配置Nginx，以便对所有请求都返回应用的入口点（通常是 index.html）。这样，不管浏览器中的路径是什么，服务器都会返回相同的index.html。一旦浏览器加载了这个HTML文件，前端路由库会根据URL来呈现正确的页面内容。

*  所以，Nginx配置的关键点是将所有请求都传递给Vue应用的 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 / {
        
            root   /usr/carehome_vue;
            index  index.html index.htm;
            # 配置让Vue Router处理路由
            try_files $uri $uri/ /index.html; 
        }
    }