开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

写在前面

上一篇文章用Vite创建了一个vue项目，并且进行了打包配置。此篇文章对用Vite创建的vue项目配置开发环境和生产环境，同时封装axios。

配置过程

添加配置文件

在项目根目录下新增两个文件：.env.development（开发环境配置文件）和.env.production（生产环境配置文件）

.env.development（开发环境配置文件）的代码如下（前面加#表示注释，将IP和端口号换成后端接口的就可以）：

# 使用【演示环境】接口地址
VITE_API_URL=http://接口IP:接口端口号

# 使用【本地环境]接口地址
# VITE_API_URL=http://接口IP:接口端口号

.env.production（生产环境配置文件）的代码如下：

VITE_API_URL=http://线上接口IP地址:线上接口端口号

使用配置文件声明的变量VITE_API_URL（接口地址）

首先在项目的src目录下新建一个文件夹，取名api，再在api文件夹下新建一个文件，取名request.ts。

接着安装axios：npm install axios

request.ts代码如下，代码中进行了详细的注释，最好看一遍知道封装的逻辑，部分代码后面讲到更多知识点的时候会补充，上面声明的变量我们通过import.meta.env.VITE_API_URL方式使用：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
    baseURL: import.meta.env.VITE_API_URL as any,
    timeout: 6000,
    headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})

// http request 请求拦截器，在发送请求前会进行拦截，执行1部分的代码
service.interceptors.request.use(
    (config: any) => {
        // 1
        // 如果token存在，就将token赋值到header的Authorization，先知道逻辑即可，代码后面补充
        // if (getToken()) {
        // 	config.headers.Authorization = getToken()
        // }

        // 追加时间戳，防止GET请求缓存
        // if (config.method?.toUpperCase() === 'GET') {
        // 	config.params = { ...config.params, t: new Date().getTime() }
        // }

        return config
    },
    error => {
        return Promise.reject(error)
    }
)

//  http response 响应拦截器，请求成功后，对返回的数据进行统一处理
service.interceptors.response.use(
    response => {
        if (response.status !== 200) {
            // 对接接口出错
            return Promise.reject(new Error(response.statusText || 'Error'))
        }

        const res = response.data
        // 响应成功，这里设置了0为响应成功的返回值，可根据实际后端返回的修改
        if (res.code === 0) {
            return res
        }

        // 没有权限，如：未登录、登录过期等，需要跳转到登录页
        // 这里401表示登录过期，403表示登录用户没有接口权限
        if (res.code === 401) {
            // 弹框提示登录过期，用户点击后跳转登录页，同时清空token，代码后面补充
        }

        if (res.code === 401) {
            // 弹框提示没有权限，用户点击重新登录跳转到登录页，点击关闭则只关闭弹框，代码后面补充
        }

        // 除了code=0、code=401、code=403的错误提示，代码后面补充

        return null
    },
    error => {
        return Promise.reject(error)
    }
)

// 导出 axios 实例
export default service

写在最后

以上就是开发环境和生产环境配置过程说明和封装axios的完整代码