Vue axios 安装与引入

这篇博客介绍了如何在Vue项目中安装和全局引入Axios库。首先通过npm命令行工具安装Axios,然后在main.js文件中将Axios绑定到Vue的原型上,确保在Vue实例中可以使用$axios属性。成功引入后,可以在浏览器控制台验证其存在。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一、安装

二、引入


一、安装

Vue 项目中安装

npm i axios -S

安装成功后可在 package.json 文件中查看安装的版本

二、引入

全局引入,赋在 Vue 的原型上。main.js 文件中注册。API 地址在此

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';

Vue.prototype.$axios = axios;

new Vue({
  axios,
  render: h => h(App)
}).$mount('#app')

浏览器的控制台中可看到该对象,表示引入成功。

### 安装 Axios 为了在 Vue 2 项目中集成 `axios`,可以通过 npm 或 yarn 来安装此库。执行如下命令来完成安装: ```bash npm install axios vue-axios --save ``` 或者使用 Yarn: ```bash yarn add axios vue-axios ``` 这一步骤确保了 `axios` 和其 Vue 插件被正确引入到项目依赖之中[^1]。 ### 配置 Axios #### 主要配置方式 一旦安装完毕,在项目的入口文件(通常是 `main.js` 文件)里添加必要的导入语句并初始化插件: ```javascript import Vue from 'vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 这段代码使得可以在所有的组件内直接访问 `$http` 实例来进行 HTTP 请求操作。 #### 设置基础 URL 及其他默认选项 对于更复杂的场景,比如设置全局的基础 API 地址或者其他默认参数,可以进一步扩展上述配置: ```javascript // 继续上面的 main.js 文件 axios.defaults.baseURL = 'https://api.example.com'; // 替换成实际的服务端地址 // 添加请求拦截器用于处理每次发出请求前的操作 axios.interceptors.request.use(config => { config.headers['Authorization'] = localStorage.getItem('token'); // 假设 token 存储于本地存储中 return config; }); // 添加响应拦截器以便统一管理服务器返回的数据结构或其他逻辑 axios.interceptors.response.use(response => response.data); // 将 axios 挂载至 Vue 的原型链上,方便各处调用 this.$http Vue.prototype.$http = axios; ``` 以上配置不仅简化了后续发起网络请求的方式,还实现了对所有请求和响应的一致性处理机制[^4]。 ### 处理跨域问题 (可选) 如果遇到开发环境下的跨域问题,则可能需要配置代理服务。针对基于 Vue CLI 构建的应用程序,可通过创建或编辑位于项目根目录下的 `vue.config.js` 文件实现这一点: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端API的实际位置 changeOrigin: true, pathRewrite: {'^/api' : ''} } } } }; ``` 该方法允许前端应用向 `/api/*` 发起请求时自动转发给指定的目标服务器,从而绕过浏览器同源策略限制[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值