Question

在我的@ vue / cli 4.0.5应用程序的任何* .vue文件中，如果需要在此页面上使用axios，则必须导入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 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"
...

怎么了？我把你的建筑物放在有效的地方了吗？还可以请您对此结构进行更多说明（或提供链接）吗？这是关于我的经验... 谢谢！

Answer 1

尝试一下：

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

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

1 个答案: