Vue打包项目生产环境接口报错404整理

vue的项目中使用axios发送ajax请求，因为跨域，使用了proxy反向代理，开发环境测试没有问题，但是项目打包放到生产环境时报404错误

前端解决：

使用了proxy反向代理
简单来说，pathRewrite是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址。

pahtRewrite	后端接口
‘^/api’: '/ ’	http://XX.XX.XX.XX:8083/login
‘^/api’: ‘/api’	http://XX.XX.XX.XX:8083/api/login

.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/' //这里放生产环境的接口地址

Nginx代理

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

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

    location /api/ 
    {
        rewrite  ^.+api/?(.*)$ /$1 break;
        proxy_pass http://xx.xxx.xxx.xx/;
    }