【问题标题】：axios is not defined in vue js cliaxios 没有在 vue js cli 中定义
【发布时间】：2018-12-24 17:48:00
【问题描述】：

我使用 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

如何解决这个问题？

【问题讨论】：

错误可能来自任何文件。检查您尝试使用它的所有地方，并确保您在任何地方都正确导入它！

标签： javascript vue.js vuejs2 axios

【解决方案1】：

解决方案 1（不推荐）：

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

window.axios = require('axios');

然后删除

Vue.use(axios)

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

使用window 通常被认为是一种不好的做法，因此您最好通过以下方式使用axios：

在您的src 目录中创建一个名为plugins 的文件夹。
然后，在该目录中创建axios.js 文件。我们将把我们所有的 axios 逻辑放在这里，并将 axios 用作 Vue 插件。
添加以下内容：

import ax from 'axios'

// insert all your axios logic here

export const axios = ax

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

在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。

【讨论】：

不知道为什么它会被否决。它确实有效！我刚试过。
它确实有效，但是，将变量分配给window 是总是一种不好的做法，除非没有其他选择。顺便说一句，我不是给你投反对票的人
@user3003238 是的，我知道！由于他不接受任何答案，我只是给了他这个解决方案。
您的答案仅适用于 vue2。对于 vue3，你必须使用 createApp 和 app.use(VueAxios)。

【解决方案2】：

要在 Vue 组件 中使用，请安装 Vue Axios 和 Axios 软件包

npm install --save axios vue-axios

在您的 main.js 文件中，添加以下内容：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

通过上述解决方案，到目前为止，我在 Vue 组件中使用 this 关键字使用 axios 时从未遇到过问题。

自定义 Javascript 文件

但是，我在自定义 JS 文件中使用 Axios 时遇到了问题，出现 axios not defined 错误。

以下在自定义 JS 文件中对我有用：

const axios = require("axios");

使用示例：

export default {
  fetchProducts() {
    return axios.get(`${ROOT_URL}/products`);
  },
};

【讨论】：

这对我很有用，谢谢！我正在使用自定义 JS 并且总是得到错误 axios undefined 但是在我的自定义 JS 中使用此声明 const axios = require('axios') 所有方法现在都可以正常工作。顺便说一句：我没有安装 vue-axios，只是使用我的 axios 全局安装就可以了。
@yehanny 我很高兴听到它对你有用。希望这个答案和您的评论也能帮助其他人获得解决方案。是的，根据应用程序设置，使用 Axios 全局安装可能就足够了。 +1

【解决方案3】：

使用以下命令安装axios

 npm install axios --save

执行上述命令导入后，如下所述：

import axios from 'axios'

【讨论】：

【解决方案4】：

包括这一行：

import {AxiosInstance as axios} from "axios";

【讨论】：

【解决方案5】：

同时安装vue-axios并导入main.js

import VueAxios from 'vue-axios'

然后在main.js:

Vue.use(VueAxios, axios)

现在，如果我没记错您的方法，您可以使用例如：

let uri = 'http://localhost:4000/tickets/add';
this.axios.post(uri, this.ticket).then((response) => {
    console.log(response);
});

【讨论】：

我需要从 npm 安装那个 VueAxios 吗？
我的意思是在这一行 import VueAxios from 'vue-axios'
我还没有安装 vue-axios 需要安装吗？
npm install vue-axios --save

【解决方案6】：

试试这个代码：

import axios from 'axios'
    Vue.use(axios)

【讨论】：

【解决方案7】：

Vue.use 表示添加插件。但是axios不是Vue的插件，所以不能通过use全局添加。

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

Vue.prototype.$axios = axios

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

【讨论】：

它说 vue 没有定义
@Beginner 你的是Vue 而不是vue，抱歉打错了

【解决方案8】：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios;

然后在您的组件中，您可以像这样开始使用 axios：

{
    methods: {
        someMethod() {
            this.$http.get('/users').then(() => {
                // do something
            })
        }
    }
}

【讨论】：