Javascript vue js cli中未定义axios

我使用

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

如何解决此问题？

解决方案1（不推荐）： 在

main.js

中，添加此行，而不是从“axios”导入axios

window.axios=require（'axios'）；

移除

Vue.use（axios）

解决方案2（建议的方法）： 使用

window

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

axios

：

在

src

目录中创建一个名为

plugins

的文件夹

然后，在该目录中创建

axios.js

文件。我们将把所有axios逻辑放在这里，并将axios用作Vue插件

添加以下内容：

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

从“axios”导入ax
//在此处插入所有axios逻辑
导出常量axios=ax
导出默认值{
安装（Vue，选项）{
Vue.prototype.$axios=ax
}
}

在

src/main.js

中，添加以下内容：

从“Vue”导入Vue//您可以跳过此行
从“./plugins/axios”导入VueAxios
Vue.use（VueAxios）

现在，您可以将axios用作组件中的

this.$axios

。类似于

这样的东西。$axios.get（）

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

从'@/plugins/axios'导入{axios}

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

axios

也可以将其用作Vuex插件：

从'@/plugins/axios'导入{axios}
const axiosPlugin=store=>{
存储。$axios=axios
}
新Vuex.商店({
...,
插件：[axiosPlugin]
})

---

现在，您可以在Vuex中将其用作

this.$axios

。

Vue。使用

意味着添加插件。但是，

axios

不是

Vue

的插件，因此您不能通过

use

全局添加它

我的建议是仅在需要时导入

axios

。但如果您确实需要在全球范围内访问它，您可能希望将其添加到原型中

Vue.prototype.$axios = axios

---

然后，您可以在vue中使用

this来访问
axios
。$axios
还可以安装
vue axios
并导入
main.js

从“vue axios”导入VueAxios

然后在
main.js
中：

Vue.use（VueAxios、axios）

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

let-uri=
http://localhost:4000/tickets/add';
this.axios.post（uri，this.ticket）。然后（（响应）=>{
控制台日志（响应）；
});

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

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

请尝试以下代码：

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

使用以下命令安装axios

 npm install axios --save

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

import axios from 'axios'

包括这一行：

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组件中使用axios这个
关键字从未遇到过问题

自定义Javascript文件

但是，我在自定义JS文件中使用Axios时遇到了问题，并且出现了Axios未定义的错误

以下内容在自定义JS文件中适用：

const axios = require("axios");

用法示例：

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

错误可能来自任何文件。检查您尝试使用它的所有位置，并确保在任何地方都正确导入它！我需要从npm安装VueAxios吗？我的意思是在这行中从“vue-axios”导入VueAxios我还没有安装vue-axios我需要安装它吗？
npm安装vue-axios——保存它说vue没有defined@Beginner您的是
Vue
，而不是
Vue
，对不起，我不知道为什么它会被否决。它确实有用！我刚刚试过。它确实有效，但是，除非没有其他选择，否则将变量指定给
窗口总是一种不好的做法。顺便说一句，我不是那个给你钱的人downvotes@user3003238是的，我知道！因为他不接受任何答案，我只是给了他这个解决方案。这是我的Usefuel谢谢！我正在处理一个自定义JS，并且总是得到错误axios undefined，但是在自定义JS中声明const axios=require（'axios'），所有方法现在都工作得很好。顺便说一句：我没有安装vue axios，只是在全球范围内使用我的axios安装就可以了。@yehanny我很高兴听到它对你有用。希望这个答案和你的评论也能帮助其他人找到解决方案。是的，根据应用程序设置，使用Axios全局安装可能就足够了+1.