Vue之 打包项目生产环境中请求接口报错404

打包流程
https://blog.csdn.net/qq_36538012/article/details/107356270

404 解决
https://blog.csdn.net/qq_34535116/article/details/120155149

问题 1 

部署项目之后,浏览器空白页,报错如下:
在这里插入图片描述解决

正常vue项目是要修改 config文件夹下的index.js 可是vue-element-admin项目没有这个文件
那就找到并且打开vue.config.js

将 publicPath: ‘/’, 改成 publicPath: ‘./’ , 之后再次执行 npm run build:prod 打包部署,即可解决
在这里插入图片描述

问题 2

vue的项目中使用axios发送ajax请求,因为跨域,使用了proxy反向代理,开发环境测试没有问题,但是项目打包放到生产环境时报404错误
在这里插入图片描述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代理有两个地方
第一个 软件面板上面这里面有一个配置,如果在这里配置代理不生效
在这里插入图片描述
第二个 就是在你打包生产环境上传到服务器上的网站设置里面
在这里插入图片描述
在配置文件中添加

location /api/ 
{
    rewrite  ^.+api/?(.*)$ /$1 break;
    proxy_pass http://xx.xxx.xxx.xx/;
}
  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

灼灼桃花夭

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值