axios 未在 vue js cli 中定义

Question

I installed axios using the npm install axios command this is my package.json dependencies

 "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.js file.

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:

Uncaught ReferenceError: axios is not defined

How to fix this?

Answer 1

Vue.use means adding plugins. However, axios is not a plugin for Vue , so you can not add it globally via use .

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

Vue.prototype.$axios = axios

Then you can access axios in vue using this.$axios

Answer 2

Solution 1 (Not recommended):

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

window.axios = require('axios');

And remove

Vue.use(axios)

Solution 2 (Recommended Approach):

Using window is generally considered a bad practice, so you better use axios the following way:

1. Create a folder named plugins inside of your src directory.

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

3. Add the following:

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:

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

Vue.use(VueAxios)

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

Therefore, you can import axios with the following line:

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

Now, you can use axios directly in your store.

Or you can also use it as Vuex plugin:

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

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

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

Now, you can use it as this.$axios in Vuex.

Answer 3

Use following command to install axios

 npm install axios --save

After executing above command import like mentioned below:

import axios from 'axios'

Answer 4

Also install vue-axios and import in main.js

import VueAxios from 'vue-axios'

Then in 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);
});

Answer 5

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

Vue.prototype.$http = axios;

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

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

Answer 6

包括这一行：

import {AxiosInstance as axios} from "axios";

Answer 7

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

Answer 8

To use in Vue Components , install both Vue Axios and Axios packages

npm install --save axios vue-axios

In your main.js file, add the following:

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

With the above solution, I never had an issue using axios in my Vue components with this keyword till now.

Custom Javascript File

However, I had faced issues using Axios in a custom JS file with axios not defined error.

Following worked for me in a custom JS file:

const axios = require("axios");

Usage example:

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

Answer 9

Try this codes:

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