axios 没有在 vue js cli 中定义

Question

我使用 npm install axios 命令安装了 axios 这是我的 package.json 依赖项

 "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

我在我的 main.js 文件中注册了 axios。

 import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'

import axios from 'axios'
import App from './App'
import routerList from './routes'

Vue.use(axios)
Vue.use(BootstrapVue)
Vue.use(VueRouter)

当我尝试在我的一个组件中使用 axios 时，出现此错误：

 Uncaught ReferenceError: axios is not defined

如何解决这个问题？

原文由 Beginner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue.use 表示添加插件。但是， axios 不是 Vue 的插件，因此您不能通过 use 全局添加它。

我的建议是仅在需要时才导入 axios 。但是如果你真的需要全局访问它，你可能希望将它添加到原型中。

 Vue.prototype.$axios = axios

然后你可以使用 axios 在 vue 中访问 — this.$axios

原文由 user3003238 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

解决方案1（不推荐）：

在 main.js 中，添加这一行而不是 import axios from 'axios'

 window.axios = require('axios');

并删除

Vue.use(axios)

解决方案 2（推荐方法）：

使用 window 通常被认为是一种不好的做法，所以你最好使用 axios 如下方式：

1. 在您的 src 目录中创建一个名为 plugins 的文件夹。

2. 然后，在该目录中创建 axios.js 文件。我们将把我们所有的 axios 逻辑放在这里，并将 axios 用作 Vue 插件。

3. 添加以下内容：

 import ax from 'axios'

// insert all your axios logic here

export const axios = ax

export default {
    install (Vue, options) {
        Vue.prototype.$axios = ax
    }
}

1. 在 src/main.js 中，添加以下内容：

 import Vue from 'vue' // You can skip this line
import VueAxios from './plugins/axios'

Vue.use(VueAxios)

现在，您可以在组件中将 axios 用作 this.$axios 。所以像 this.$axios.get() 。

因此，您可以使用以下行导入 axios：

 import { axios } from '@/plugins/axios'

现在，您可以直接在您的商店中使用 axios 。

或者您也可以将其用作 Vuex 插件：

 import { axios } from '@/plugins/axios'

const axiosPlugin = store => {
   store.$axios = axios
}

new Vuex.Store({
    ...,
    plugins: [axiosPlugin]
})

现在，您可以在 Vuex 中将其用作 this.$axios 。

原文由 Axel 发布，翻译遵循 CC BY-SA 4.0 许可协议