Необходимо импортировать axios в любой файл * .vue приложения vue / cli 4.0.5

Question

В моем приложении @ vue / cli 4.0.5 в любом файле * .vue я должен импортировать axios, если мне нужно использовать его на этой странице, например:

<script>
    import {bus} from '../../../src/main'
    import appMixin from '@/appMixin'
    import axios from 'axios'
    ...

Но я ожидал axiosбыть доступным в * .vue файле моего приложения. В src / main.js я определил:

import router from './router'
import store from './store'
import axios from 'axios'
...

Vue.use(axios)

moment.tz.setDefault(settingsTimeZone)
export const bus = new Vue()

axios.defaults.crossDomain = true
Vue.config.productionTip = false
Vue.prototype.$http = axios

У меня есть этот вопрос, так как раньше я работал в приложении laravel 5 / vuejs 2.6 У меня есть axios, который был доступен во всех * .vue файлах моего приложения без каких-либоопределение ... Почему так и если мне нужно написать

import axios from 'axios'

в любой файл, где мне нужны axios?

ОБНОВЛЕННЫЙ БЛОК:

In my src/main.js I tried and failed as :

...
import axios from 'axios'

export const bus = new Vue()

axios.defaults.crossDomain = true
// axios.withCredentials = true
// window.axios.defaults.baseURL =  window.App.baseurl;

Vue.config.productionTip = false
Vue.prototype.$http = axios

const token = localStorage.getItem('token')
if (token) {
    Vue.prototype.$http.defaults.headers.common['Authorization'] = token
}

// home url in .env file
let apiUrl = process.env.VUE_APP_API_URL
alert( '++apiUrl::'+apiUrl ) // CHECK IT VALID URL
new Vue({
    router,
    store,
    bus,
    render: h => h(App)
}).$mount('#app')

Vue.use({
    install (Vue) {
        Vue.prototype.$api = axios.create({
            baseURL: apiUrl // !!!
        })
    }
})

router.afterEach((to, from) => {
    bus.$emit('page_changed', from, to)
})

Но затем в моем компоненте я прокомментировал строку с импортом axios:

<script>

    import {bus} from '../../main'
    // import axios from 'axios'

    import Vue from 'vue'
    ...
    export default {

        data: function () {
            return {
              ...
            }
        }, // data: function () {

        mounted() {
            this.loadTasksData()
        }, // mounted() {

        methods: {
            loadTasksData() {
                let apiUrl = process.env.VUE_APP_API_URL
                let config = {
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json',
                        'Access-Control-Allow-Origin': '*',
                    }
                }

                axios({url: apiUrl + '/tasks_paged/' + this.current_page, data: {}, method: 'get', config: config})
                    .then(response => {  // Error here!

Я получил ошибку:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "ReferenceError: axios is not defined"
...

Что не так? Я положил вашу конструкцию в правильное место? Также не могли бы вы дать больше объяснений (или дать ссылку) об этой конструкции? Речь идет о моем опыте ... Спасибо!

Answer 1

Попробуйте это:

Vue.use({
    install (Vue) {
    Vue.prototype.$api = axios.create({
      baseURL: 'PUT A BASE URL IF YOU WANT'
    })
  }
})