vue 项目配置反向代理导致项目白屏，js、css文件404问题解决方案

- 日理万妓 2024-04-03 14:13 63阅读 0赞

## 现象 ##

现象：项目上传到服务器后，配置反向代理后出现页面无法打开，所有的js、css文件都是404  
![在这里插入图片描述][642bf63d7cf142bdad2ed0c02eea2e9a.png]  
宝塔反向代理：  
![在这里插入图片描述][462c751e005545a7be73785959ce2440.png]  
配置文件

#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

## 原因 ##

反向代理将资源等一并进行了代理，但原本的代理中只有接口，没有相关的文件，导致404，找不到

## 解决方案 ##

1、修改反向代理配置文件,屏蔽或删除以下代码

#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

[642bf63d7cf142bdad2ed0c02eea2e9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7e543180d3e6432ebbc450db6abb3a59.png
[462c751e005545a7be73785959ce2440.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/47e10a75b6d5451585f05611b69bdd90.png