必须在 vue/cli 4.0.5 应用程序的任何 *.vue 文件中导入 axios答案

【问题标题】：Have to import axios in any *.vue file of vue/cli 4.0.5 app必须在 vue/cli 4.0.5 应用程序的任何 *.vue 文件中导入 axios
【发布时间】：2019-12-01 13:13:13
【问题描述】：

在我的 @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 应用程序中工作过我的应用程序的所有 *.vue 文件都可以访问 axios 没有任何定义... 为什么这样，如果我必须写

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 import 注释了一行：

<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"
...

怎么了？我把你的建筑放在有效的地方了吗？另外，您能否就这种结构提供更多解释（或提供链接）？这是关于我的经验... 谢谢！

【问题讨论】：

标签： vuejs2

【解决方案1】：

试试这个：

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

【讨论】：

谢谢！。请查看更新块