由Uncaught ReferenceError: $http is not defined引发的一系列问题

在我采用前后端分离，编写vue3想要获取后端数据的时候，我的配置是这样子的：

1.通过如下命令安装axios:

npm install axios -S

2.在一个包utils下面创建一个文件axios.js里面进行引入配置：

3.在配置文件main.js里面进行全局挂载：

import axios from '@/utils/axios.js'
app.config.globalProperties.$http = axios//进行全局挂载

 然后进行使用：

 运行的时候发现出现了错误：说我的$http没有定义，但是喔记得明明是已经挂载的呀，就很纳闷 

在网上找了很多解决办法，比如如下：

通过获取全局的对象来找到$http:

在要进行连接后端接口的页面进行如下设置：

import { getCurrentInstance} from "vue";
const {ctx} = getCurrentInstance()

然后通过全局对象来获取$http：

然后我非常兴奋，以为这次没有问题了，当我很开心的很确信的再次运行的时候 ，可是由于太菜上天又给我开了一个玩笑，又报错了：

这到底是什么情况，寻思了很久的我在网上找了各种办法，直到有一个时刻，在网上看到一位朋友写的博客受到启发非常大，于是我试着把上面的两个东西打印出来：

继续在浏览器运行：

控制台打开，把打印的第一个内容展开如下：

发现里面并没有$http方法

继续点开打印的第二个内容：

然后终于黄天不负有心人，最终让我发现$http这个这个东西藏在这里里面。

 于是，我对内容进行修改：

发现又继续报了一个错误：

然后将const定义的核心元素$http打印出来如下第二个图：

发现里面呢还存在着一个$http，继续展开里面那个$http发现存在get方法：

于是我将获取后端数据的接口处做如下修改，让$http.$http.get方法来：

终于这次以为没有问题了，但是运行的时候又爆了一个错误：

 救救我啊，怎么会还有问题，这个请求后端的数据的端口号就不对，我记得我不是在axios.js里面配置了吗，难道是没有生效就默认为当前运行程序的端口号了。

然后又是继续修改如下：

丢弃掉之前的文件axios.js，直接进行全局最普通的挂载也就是下面三样：

在main.js配置文件中进行如下配置：

import axios from 'axios'
axios.defaults.baseURL='http://localhost:8080'
app.config.globalProperties.$http = axios//进行全局挂载，该部分要放在pp.mount('#app')的全面

最终通过浏览器访问，可以打印出来我向向后端接收的数据了：

真的这就是我走的最深最深的一次坑了，希望友友们看到了，能够少走点弯路。