Vue项目打包到服务器后请求接口报错404

背景：前端Vue项目打包后部署在服务器上，而后端接口在另外一台服务器。本地生产环境运行时因为在Vue中配置了proxy代理，所以项目运行正常。但是在服务器开发环境中，一直报错404。

原因：在开发环境中设置了proxy代理后，打包时proxy代理就会失效，因为proxy代理并不会一起打包到开发环境的dist文件夹下。

解决方案：

在开发环境中配置proxy反向代理

.env.development 开发环境

# just a flagENV = 'development'Mock: true# base apiVUE_APP_BASE_API = 'http://localhost:3000/' //这里放开发环境的接口地址

.env.production 生产环境

# just a flagENV = 'production'Mock: false# base apiVUE_APP_BASE_API = 'http://xx.xxx.xxx.xx/' //这里放生产环境的接口地址

服务器配置Nginx反向代理

以宝塔举例：Nginx反向代理配置有两个地方
第一个 软件面板上面这里面有一个配置，如果在这里配置代理不生效

第二个 就是在打包生产环境上传到服务器上的网站设置里面

 在配置文件中添加

location /api/ {    rewrite  ^.+api/?(.*)$ /$1 break;    proxy_pass http://xx.xxx.xxx.xx/;     //后端的请求接口}

问题解决。

来源地址：https://blog.csdn.net/speano/article/details/124905322