Javascript axios 未在 vue js cli 中定义

axios is not defined in vue js cli

提问by Beginner

I installed axios using the npm install axioscommand this is my package.jsondependencies

我使用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"
  },

I registered the axios in my main.jsfile.

我在我的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)

When I tried to use axios in one of my components I get this error:

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

Uncaught ReferenceError: axios is not defined

How to fix this?

如何解决这个问题？

回答by user3003238

Vue.usemeans adding plugins. However, axiosis not a plugin for Vue, so you can not add it globally via use.

Vue.use意味着添加插件。但是，axios它不是 的插件Vue，因此您不能通过use.

My recommendation is importing axiosonly when you need it. But if you really need to access it globally, you may like to add it to prototype.

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

Vue.prototype.$axios = axios

Then you can access axiosin vue using this.$axios

然后你可以使用axiosvue访问this.$axios

回答by Sanjay

Solution 1 (Not recommended):

解决方案1（不推荐）：

In main.js, add this line instead of import axios from 'axios'

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

window.axios = require('axios');

And remove

并删除

Vue.use(axios)

Solution 2 (Recommended Approach):

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

Using windowis generally considered a bad practice, so you better use axiosthe following way:

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

1) Create a folder named pluginsinside of your srcdirectory.

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

2) Then, create axios.jsfile inside that directory. We will put all our axios logic here and use axios as a Vue plugin.

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

3) Add the following:

3) 添加以下内容：

import ax from 'axios'

// insert all your axios logic here

export const axios = ax

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

4) In src/main.js, add the following:

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

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

Vue.use(VueAxios)

Now, you can use axios as this.$axiosin your components. So something like this.$axios.get().

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

Therefore, you can import axios with the following line:

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

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

Now, you can use axiosdirectly in your store.

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

Or you can also use it as Vuex plugin:

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

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

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

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

Now, you can use it as this.$axiosin Vuex.

现在，您可以像this.$axios在 Vuex 中一样使用它。

That's it!

就是这样！

回答by user3918528

Also install vue-axiosand import in main.js

还安装vue-axios并导入main.js

import VueAxios from 'vue-axios'

Then in main.js:

然后在main.js：

Vue.use(VueAxios, axios)

Now if I am not mistaken in your methods you can use for example:

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

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

回答by Julian Paolo Dayag

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

Vue.prototype.$http = axios;

then inside your component you can start using axios like this:

然后在您的组件中，您可以开始使用 axios，如下所示：

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

回答by Ajay

Use following command to install npm

使用以下命令安装 npm

 npm install axios --save

After executing above command import like mentioned below:

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

import axios from 'axios'

回答by Hamza Khan

Include this line:

包括这一行：

import {AxiosInstance as axios} from "axios";

回答by Mike

i found in laravel project window.axios = require('axios');when i insert it in myproject. that all be fine!

window.axios = require('axios');当我将它插入到我的项目中时，我在 Laravel 项目中找到了它。一切都会好起来的！

回答by John

Try this codes:

试试这个代码：

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