解决：针对Vue前端自有路由策略，经过Nginx报404的问题

心已赠人 2024-04-18 10:46 42阅读 0赞

通过Nginx配置解决Vue前端自有路由策略，经过Nginx报404的问题

### 1、针对Vue前端自有路由策略，经过Nginx报404； ###

> root /home/qdfinance/apps/pages/insure\_wx/;  
> error\_page 404 /index.html;

### 2、精细化解决特定请求前端自有的跳转页面，detail和me路径，经过nginx重定向为vue中的index.html。 ###

>      location /detail/ \{  
>           rewrite ^/(.\*)$ /index.html last;  
>      \}  
>      location /me \{  
>           rewrite ^/(.\*)$ /index.html last;  
>       \}

说明：

1、监听 9007端口。

2、静态资源，存放至/home/qdfinance/apps/pages/insure\_wx/目录下。

3、后台接口[http://192.168.30.153:8098/][http_192.168.30.153_8098]。

4、即实现前后端分离。

server {
            listen       9007;
            server_name  192.168.30.153;
            root /home/qdfinance/apps/pages/insure_wx/;
    
    
           location / {
             proxy_set_header Host $host:$server_port;
             proxy_pass   http://192.168.30.153:8098/;
             root /home/qdfinance/apps/pages/insure_wx/;
             error_page 404 /index.html;
           }
           location   = / {
              root /home/qdfinance/apps/pages/insure_wx/;
              add_header Cache-Control "no-cache, no-store";
           }
            location /index.html {
              root  /home/qdfinance/apps/pages/insure_wx/;
              add_header Cache-Control "no-cache, no-store";
            }
    
            location /static/ {
              root  /home/qdfinance/apps/pages/insure_wx/;
            }
            location /detail/ {
              rewrite ^/(.*)$ /index.html last;
            }
            location /me {
              rewrite ^/(.*)$ /index.html last;
            }
    
        }

[http_192.168.30.153_8098]: http://192.168.30.153:8098/