vue打包后接口报错

最近自己和朋友做了一个小的项目,用的是vue3.x版本,本地dev运行的时候接口什么的都是正常的,但是build打包后本地使用anywhere启动一个本地服务的时候发现接口报错405状态,发布到线上接口直接报错404。

很奇怪,因为本地都是好的没有道理线上的不行。

我第一时间想到的很大可能是设置代理的部分出了问题。

首先我排查了本地的代码,本地代码是ok的,然后和之前2.x版本的代理配置比对,也没有发现问题所在。

然后在谷歌上面找到了一个原因:

vue的代理配置只是在dev的时候启动,打包的时候并没有把这个代理配置进去。

也就是说生产环境是没有代理的,而我们的项目因为后端的原因设置了两个端口号(正常来讲一个项目的话,给到前端应该是同一个ip同一个端口号,不同的地址后端去做nginx代理),因为两个端口号,为了避免接口出错我直接把代理部分设置为了带有ip地址的接口,在axios里面把baseURL去掉了,这样就造成dev时候代理启用,所以接口不报错,anywhere的时候代理没有启用所以就有跨域,而在线上因为端口号不一样,直接就找不到。

然后我又重新改造了前端的代码,在封装了post方法的里面把baseURL设置为传参而不是默认值,相当于增加了一个参数(实际项目中不建议这样做)。

至此问题解决。

因为使用了3.x的版本,在打包的时候需要注意打包后引用的js和css的路径问题。

关于baseUrl:

baseUrl会附加到你绑定的axios实例(如果是全局的,那就是所有实例)上,即如果get/post的url参数是相对路径(如) /api/c/xx,那就会执行 baseUrl + '/api/c/xx',如果未指定baseUrl,那就走浏览器地址栏里的base + baseUrl。

posted @ 2019-04-16 10:10  骚年上天不?  阅读(4062)  评论(0编辑  收藏  举报