无论我做什么，浏览器控制台都会出现此错误。

首先，我是 VueJS 新手。我的网站功能齐全，它是用 Laravel 构建的。我正在尝试将前端转换为 VueJS。我正在尝试从数据库检索数据并使用 VueJS 将它们显示在首页上。

app.js

require('./bootstrap');

window.Vue = require('vue');

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('title-bar',require('./components/front/titleBar.vue').default);
Vue.component('info-bar',require('./components/front/infoBar.vue').default);

import axios from 'axios';

Vue.use(axios);

const app = new Vue({
    el: '#app',
});

infoBar.js

<template>
<div class="container">
    <div class="row align-items-center justify-content-between mx-0">
        <ul class="list-inline d-none d-lg-block mb-0">
            <li class="list-inline-item mr-3">
                <div class="d-flex align-items-center">
                    <i class="ti-email mr-2"></i>
                    <a href="mailto:[email protected]">{{ info.email }}</a>
                </div>
            </li>
            <li class="list-inline-item mr-3">
                <div class="d-flex align-items-center">
                    <i class="ti-headphone mr-2"></i>
                    <a href="tel:+8801740411513">{{  info.phone }}</a>
                </div>
            </li>
        </ul>
        <ul class="list-inline mb-0">
            <li class="list-inline-item mr-0 p-3 border-right border-left border-white-0_1">
                <span>EIIN: {{ info.eiin }}</span>
            </li>
            <li class="list-inline-item mr-0 p-3 border-right border-white-0_1">
                <span>Institute Code: {{ info.code }}</span>
            </li>
        </ul>
        <ul class="list-inline mb-0">
            <li class="list-inline-item mr-0 p-md-3 p-2 border-right border-left border-white-0_1">
                <a href="#">Login</a>
            </li>
        </ul>
    </div> <!-- END END row-->
</div> <!-- END container-->

</template>

<script>

export default {
    data() {
        return {
            info: {}
        }
    },
    created() {
        this.axios
            .get('http://localhost/wpschool/public/api/info-bar')
            .then(response => {
                this.info = response.data;
                console.log(response.data)
            });
    }
}
</script>

api.php

<?php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('info-bar','FrontController@infoBar');
Route::get('title-bar','FrontController@titleBar');

controller

public function infoBar()
{
    $info = [
        'email' => siteConfig('email'),
        'phone' => siteConfig('phone'),
        'eiin' => siteConfig('eiin'),
        'code' => siteConfig('institute_code')
    ];

    return response($info);
}

在 Vue 控制台中， <info-bar> 组件返回的是空对象。控制台返回了有关 axios 的两个错误

[Vue warn]: Error in created hook: "TypeError: this.axios is undefined"

found in

---> at resources/js/components/front/infoBar.vue

和

TypeError: this.axios is undefined

Choo 29

我尝试重新安装 axios ，但结果相同。