本文实乃匠心之作,全程干货,希望能帮到大家。

在做springboot整合vue的前后端分离项目时遇到此问题。

搜了一下,别人是这样说的:根本原因是 引入的axios库是使用vue2.0开发的一套组件库,而我们当前的项目为vue3,所有存在兼容性的问题。

网上的解决方案也都试了一遍,问了前端的小伙伴他也不知道,但是它建议我用vue2再来,我不服,没人踩这坑,我拼了半条命也要给他填了。

首先,如果你是简单的项目,axios调用也只有一个弹窗测试,那么你可以这样做。

注释掉就可以了,你就会发现可以用。

但是当你真想调用访问后端接口时,比如调用get


  created() {
    // alert(123)
    axios.get("http://localhost:xxxx/xxxx").then(function (resp){
      console.log(resp)
    })
  }

你就会发现马上就报错了。不卖关子了,整体怎么解决呢。

解决方案:

1.注释掉axios中的倒数第二行代码(如果你刚刚做了可以直接下一步)

2.去main.js中添加以下代码

import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(VueAxios,axios)

 3.这个时候,确实不报刚刚的ues问题了,但是会报vue-axios没安装

4.没安装就去安装呗,但是你会发现,安装不上。(安装上的就已经解决完了)。

5.没安装上你仔细一看,报错是这样的

 很简单,我就理解为是vue3和axios打完架,别的又发生冲突了,报错提示的非常明显了,那我们继续下一步,直接去package.json里改版本

既然你说axios版本不太行,行,直接上最新的0.26.1。

然后就是控制台npm install一下,然后运行项目,到此这些问题就解决完了。

注:要是你运行还错,而且有关axios什么not found,请去你的vue文件里导入axios,

import axios from "axios";

如果解决了,剩下的就是跨域问题了

跨域问题请看:https://blog.csdn.net/weixin_53156322/article/details/123416375

感谢观看。

Logo

前往低代码交流专区

更多推荐