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

Tearl

已于 2023-03-03 12:18:46 修改

阅读量1.7w

点赞数 7

文章标签： vue.js 服务器前端

于 2022-05-22 00:08:11 首次发布

本文链接：https://blog.csdn.net/speano/article/details/124905322

版权

本文讲述了前端Vue项目在服务器开发环境遇到404错误的原因，即proxy代理在打包时不生效。解决方案包括在开发环境配置proxy反向代理和通过Nginx进行服务器级代理。重点介绍了如何在.env.development文件中设置Mock和实际接口地址，以及在宝塔Nginx配置中的正确步骤。

摘要由CSDN通过智能技术生成

背景：前端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反向代理配置有两个地方
第一个软件面板上面这里面有一个配置，如果在这里配置代理不生效

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

在配置文件中添加

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

问题解决。

关注