背景：前端Vue项目打包后部署在服务器上，而后端接口在另外一台服务器。本地生产环境运行时因为在Vue中配置了proxy代理，所以项目运行正常。但是在服务器开发环境中，一直报错404。
原因：在开发环境中设置了proxy代理后，打包时proxy代理就会失效，因为proxy代理并不会一起打包到开发环境的dist文件夹下。
解决方案：
1.在开发环境中配置proxy反向代理
.env.development 开发环境
# just a flag
ENV = 'development'
Mock: true
# base api
VUE_APP_BASE_API = 'http://localhost:3000/' //这里放开发环境的接口地址
.env.production 生产环境
# just a flag
ENV = 'production'
Mock: false
# base api
VUE_APP_BASE_API = 'http://xx.xxx.xxx.xx/' //这里放生产环境的接口地址
2.服务器配置Nginx反向代理
以宝塔举例：Nginx反向代理配置有两个地方
第一个 软件面板上面这里面有一个配置，如果在这里配置代理不生效
第二个 就是在打包生产环境上传到服务器上的网站设置里面
在配置文件中添加文章来源：https://www.toymoban.com/news/detail-696697.html
location /api/
{
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://xx.xxx.xxx.xx/; //后端的请求接口
}
问题解决。文章来源地址https://www.toymoban.com/news/detail-696697.html
到了这里，关于Vue项目打包到服务器后请求接口报错404的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
