Vue project configuration reverse proxy leads to project white screen, js, css file 404 problem solution

Phenomenon

Phenomenon: After the project is uploaded to the server, the page cannot be opened after the reverse proxy is configured, and all js and css files are 404

pagoda reverse proxy:

configuration file

#PROXY-START/api
location  ~* \.(gif|png|jpg|css|js|woff|woff2)$
{
    proxy_pass http://www.www.cn;
    proxy_set_header Host www.www.cn;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    expires 12h;
}
location /api
{
    proxy_pass http://www.www.cn;
    proxy_set_header Host www.www.cn;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    	add_header Cache-Control no-cache;
}

#PROXY-END/api

reason

The reverse proxy proxies resources, etc., but the original proxy only has interfaces and no related files, resulting in 404, not found

solution

1. Modify the reverse proxy configuration file, block or delete the following code

#PROXY-START/api
# 需要屏蔽或删除的代码
#location  ~* \.(gif|png|jpg|css|js|woff|woff2)$
#{
#    proxy_pass http://www.www.cn;
#    proxy_set_header Host www.www.cn;
#    proxy_set_header X-Real-IP $remote_addr;
#    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#    proxy_set_header REMOTE-HOST $remote_addr;
#    expires 12h;
#}
# 结束
location /api
{
    proxy_pass http://www.www.cn;
    proxy_set_header Host www.www.cn;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    	add_header Cache-Control no-cache;
}

#PROXY-END/api