vue js cli에 Axios가 정의되어 있지 않습니다.

vue js cli에 Axios가 정의되어 있지 않습니다.

Axi를 사용하여 설치했습니다.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파일.

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

어떻게 고칠까요?

Vue.use플러그 인을 추가하는 것을 의미합니다.하지만,axios의 플러그인이 아닙니다.Vue를 사용하여 글로벌하게 추가할 수 없습니다.use.

권장사항은 Import입니다.axios필요할 때만.그러나 전 세계적으로 액세스해야 하는 경우에는 프로토타입에 추가할 수도 있습니다.

Vue.prototype.$axios = axios

그러면 에 접속할 수 있습니다.axiosvue에서 사용this.$axios

솔루션 1(권장하지 않음):

인main.js, 이 행을 추가합니다.import axios from 'axios'

window.axios = require('axios');

제거하다

Vue.use(axios)

솔루션 2(권장 접근법):

사용.window일반적으로 나쁜 관행으로 간주되기 때문에axios다음과 같이 합니다.

1. 폴더 생성:plugins내면에src디렉토리로 이동합니다.

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

따라서 다음 행으로 악리를 Import할 수 있습니다.

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

이제 사용할 수 있습니다.axios당신의 가게에서 직접.

또는 Vuex 플러그인으로 사용할 수도 있습니다.

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

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

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

이제, 이것을 다음과 같이 사용할 수 있습니다.this.$axiosVuex에 있습니다.

다음 명령을 사용하여 액시스를 설치합니다.

 npm install axios --save

아래 설명과 같이 위의 명령어를 실행한 후 Import:

import axios from 'axios'

인스톨도 실시합니다.vue-axiosImport하다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);
});

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

Vue.prototype.$http = axios;

컴포넌트 내부에서 다음과 같은 악리를 사용할 수 있습니다.

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

다음 행을 포함합니다.

import {AxiosInstance as axios} from "axios";

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키워드를 입력해 주세요.

커스텀 Javascript 파일

단, 커스텀 JS 파일에서 Axios를 사용하는 경우 정의되지 않은 오류로 인해 문제가 발생하였습니다.

커스텀 JS 파일에서는 다음과 같은 작업이 수행되었습니다.

const axios = require("axios");

사용 예:

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

다음 코드를 사용해 보십시오.

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

언급URL : https://stackoverflow.com/questions/51374367/axios-is-not-defined-in-vue-js-cli