Vue封装axios请求（超详细）

在这里插入图片描述

一、简介

Vue封装axios请求是指将axios库集成到Vue项目中，以便更方便地发送HTTP请求。首先，需要安装axios库，然后在Vue项目中创建一个名为request.js的文件，用于封装axios实例。在这个文件中，可以设置默认的配置，如基础URL、超时时间等。接下来，可以定义一些常用的请求方法，如GET、POST等，并将这些方法导出，以便在Vue组件中使用。这样，每次发送请求时，只需调用封装好的方法即可，无需每次都写完整的axios代码。

二、代码实现

2.1 创建Vue2项目

创建项目
```
vue create vue-request
```

选项（选择自定义）

Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

手动选择功能
选择vue的版本
选择css预处理
选择配置文件的生成方式
是否保存预设，下次直接使用？ => 不保存，输入 N

2.2 安装插件

npm install --save axios
npm install element-ui -S
// 或者
yarn add axios
yarn add element-ui

在这里插入图片描述

2.3 配置环境变量

项目路径下创建.env.development、.env.production文件

.env.development

# 页面标题
VUE_APP_TITLE = 佳运管理系统# 开发环境配置
ENV = 'development'# 开发环境
VUE_APP_BASE_API = '/dev-api'

.env.production

# 页面标题
VUE_APP_TITLE = 佳运管理系统# 生产环境配置
ENV = 'production'# 生产环境
VUE_APP_BASE_API = '/prod-api'

2.4 配置vue.config.js文件

// 导入 Vue CLI 的配置工具
const { defineConfig } = require('@vue/cli-service')// 使用 defineConfig 函数来定义项目的配置
module.exports = defineConfig({// 指定是否对依赖进行转译。如果设置为 true，则所有依赖都会被 Babel 转译transpileDependencies: true,// 如果是生产环境则使用 /，否则也使用 /。如果部署到子路径下，需要修改为相应的子路径。publicPath: process.env.NODE_ENV === "production" ? "/" : "/",// 构建输出目录的名称，默认是 distoutputDir: 'dist',// 配置生成的静态资源存放的目录assetsDir: 'static',// 是否开启eslint保存检测，有效值：ture | false | 'error'lintOnSave: process.env.NODE_ENV === 'development',// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。productionSourceMap: false,// webpack-dev-server 相关配置devServer: {// 设置开发服务器的主机地址，0.0.0.0 表示服务器监听所有 IP 地址host: '0.0.0.0',// 开发服务器使用的端口 --记得修改成自己的前端端口port: 9000,// 设置是否在启动服务器后自动打开浏览器open: true,// 配置代理规则，用于解决跨域问题proxy: {// 定义代理规则的前缀[process.env.VUE_APP_BASE_API]: {// 代理的后端目标地址target: `http://localhost:8080`,// 设置为 true 时，会改变请求的 origin 头，使得目标服务器能够正确响应changeOrigin: