vue打包代理接口404

一般这种情况，都是在前端配置了反向代理，如下图：

图中的 api 就可以代替 target 中的后台地址，这个在线上环境是有问题的，api 在线上环境就变成了字符串，所以所有接口都会出现404问题

前端解决方案如下：

在项目目录中添加 .env 文件，配置线上打包地址

在 main.js 中打印查看是否正确

添加 axios 拦截器，线上环境把 /api 截取掉

OK，这样接口404问题就在前端解决了

在服务器上解决接口404问题：

登录服务器，找到nginx的安装目录下：cd /etc/nginx
打开配置文件 vi nginx.conf
按 i 修改，新增

 location /api {
		   	  proxy_set_header   Host             $host;
		      proxy_set_header   x-forwarded-for  $remote_addr;
		      proxy_set_header   X-Real-IP        $remote_addr;
		      proxy_pass http://www.baidu.com; // 接口地址，如果在同一个服务器上，可以直接这样写
}  

保存退出，先esc，然后保存 :wq!
nginx支持热启动，所以直接重启命令 service nginx reload
nginx反向代理生效了，现在可以继续用代理，接口请求成功