zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    k6负载测试学习知识
    52条SQL语句性能优化策略(转)
    JVM学习
    jsonp劫持
    Airtest API精讲之keyevent()
    Airtest API精讲之Android自定义手势
    Airtest API精讲之text()
    Airtest之调用其他脚本——using()如何使用
    Airtest API精讲之wait(),exists()
    Airtest API精讲之报告日志log()
  • 原文地址:https://www.cnblogs.com/sixrookie/p/10715221.html
Copyright © 2011-2022 走看看