解决方案1（不推荐）：

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

该如何解决？

Answer 1

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

我的建议是仅在需要时才导入axios。但是，如果您确实需要全局访问它，则可以将其添加到原型中。

Vue.prototype.$axios = axios

然后，您可以使用axios来访问this.$axios

Answer 2

解决方案1（不推荐）：

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

window.axios = require('axios');

然后删除

Vue.use(axios)

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

通常认为使用window是一种不好的做法（有趣的是Laravel实际上使用这种方式），因此，最好通过以下方式使用axios：

1）在plugins目录内创建一个名为src的文件夹。

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

3）添加以下内容：

import axios_http from 'axios'

// insert all your axios logic here

export const axios = axios_http

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

4）在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()。

但是，在Vuex中，您无法访问this，因此必须从axios文件中导入plugins/axios.js。

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

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

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

就是这样！

Answer 3

还安装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);
});

Answer 4

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

Vue.prototype.$http = axios;

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

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

Answer 5

使用以下命令安装npm

 npm install axios --save

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

import axios from 'axios'

Answer 6

我在laravel项目window.axios = require('axios');中找到了当我将其插入myproject中时。一切都很好！

Answer 7

包括此行：

import {AxiosInstance as axios} from "axios";

Answer 8

尝试以下代码：

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

Answer 9

要在 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 错误。

以下在一个自定义JS文件中为我工作：

const axios = require("axios");

用法示例：

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

在vue js cli中未定义axios

9 个答案:

解决方案1（不推荐）：

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