axios 未在 vue js cli 中定義

Question

我使用npm install axios命令npm install 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在VUE利用this.$axios

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
    }
}

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() 。

因此，您可以使用以下行導入 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 axios。

Answer 3

使用以下命令安裝 axios

 npm install axios --save

執行上述命令導入后，如下所述：

import axios from 'axios'

Answer 4

還要安裝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 5

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

Vue.prototype.$http = axios;

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

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

Answer 6

包括這一行：

import {AxiosInstance as axios} from "axios";

Answer 7

我在laravel項目window.axios = require('axios'); 當我將其插入myproject中時。 一切都很好！

Answer 8

要在Vue Components 中使用，請安裝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`);
  },
};

Answer 9

試試這個代碼：

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