config--vue3环境配置文件 针对 axios

环境配置文件 方式一 采用此方式

1 开发环境

2 生产环境

3 测试环境

// 当前环境 process.env.NODE_ENV  vite--import.meta.env.MODE
const env = process.env.NODE_ENV || 'build'

const envConfig = {
	// 开发环境
	development: {
		baseApi: '/xxxxxxx',
		mockApi:
			'https://www.fastmock.site/mock/554408d3a7af4b09296b9786fd84e544/api',
	},
	// 生产环境
	build: {
		baseApi:
			'https://www.fastmock.site/mock/554408d3a7af4b09296b9786fd84e544/api',
	},
	// 测试环境
	test: {
		baseApi: '/xxxxxxx',
		mockApi:
			'https://www.fastmock.site/mock/554408d3a7af4b09296b9786fd84e544/api',
	},
}

export default { ...envConfig[env], env }

环境配置文件 方式二 了解

项目根目录 创建 俩 文件 与 src同级

.env.development .env.production

分别 代表 开发模式 与 生产模式
重点 必须 以 VUE_APP_ 开头
重启 vue.config.js

VUE_APP_baseUrl = "http://localhost:8888"

VUE_APP_baseUrl = "http://localhost:8888"

request.js 中 通过 环境变量 读取对应的 模式中的 baseUrl

export const baseURL = process.env.process.env.VUE_APP_baseUrl

json-server 简单使用

cd 到 db.json 文件夹中

json-server --watch db.json --port 8888

或者

修改 package.json

	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint",
		"mock": "json-server --watch ./src/mock/db.json --port 8888"
	}

无需指定位置 直接 npm run mock

request.js

/*
    封装请求工具--utils--request.js
    1 初始化 axios 实例
    2 请求拦截器 头部 带上 token
    3 响应拦截器 拿出响应数据 拦截失效 token
    4 导出 axios 实例--函数形式--返回 Promise
*/
import axios from 'axios'
import axiosRetry from 'axios-retry'

import config from '@/config'

import { ElMessage } from 'element-plus'

// 导出 URL  其他不是通过axios 请求的地址 使用这个
// 此处 是  fast mock 在线 模拟的数据
export const baseURL = config.baseApi

// 1 创建 axios实例
const instance = axios.create({
	baseURL,
	timeout: 5000,
})
// 2 axios   拦截器
// 请求 成功  失败   发请求之前拦截
// use 里面两个   回调函数 config为回调函数参数   成功与失败对应执行
// 拦截后一定要返回出去  config 不然下以后的axios就无法获取config
instance.interceptors.request.use(
	config => {
		// 拦截后做什么  也可create时处理
		// 1 config.headers config.url 等处理config
		// 2 弹框等 延时组件  完事后 响应拦截去掉
		// 3 登录等 要携带信息token  没有可以跳转对应界面

		// 最后返回出去 处理后的config
		return config
	},
	err => Promise.reject(err)
)
// 3 响应 成功  失败   回调函数  数据返回之前拦截
instance.interceptors.response.use(
	//  最后返回出去 处理后的v  后台数据  v.data  为服务器返回数据 v包含6个
	v => v.data,
	e => {
		/*
		    token 验证失败 且是401 携带当前路由进入登录页,登陆成功返回当前页
		    401 进入该函数
         1 清空无效用户信息
         2 跳转到登录页面
         3 跳转到登录页面 应携带当前路由地址 以便跳回  取 route.query.redirectUrl
				 组件中‘/user?a=10&b=1’ $route.path === /user   携带数据丢失
				                   $route.fullPath === /user?a=10
				 router.currentRoute 是 ref响应式 数据  .value
				 ? & 等特殊字符要转码 encodeURIComponent  防止解析地址错误
      */
		// if (e.response && e.response.status === 401) {
		// }
		ElMessage.error('服务器 内部错误')
		return Promise.reject(e)
	}
)
// 配置axios-retry
// 传入axios实例 要放在 request response 后  否则重试但无法触发 then catch
axiosRetry(instance, {
	retries: 2, // 设置自动发送请求次数
	retryDelay: () => 0.5 * 1000, // 重复请求延迟（毫秒）
	shouldResetTimeout: true, //  重置超时时间
	// return true为打开自动发送请求，false为关闭自动发送请求
	retryCondition: error => error.message.includes('timeout'),
})
/*
   4 返回 promise
   请求地址 请求方式 请求数据
   1 get params 来提交 submitData
   2 post data 提交 submitData
   { [ 可写 表达式 ] : value} 动态 key
    get Get  GET   统一转为小写 toLowerCase()
*/
export default (url, submitData, isUseMock = false, method = 'GET') => {
	/**
	 * 生产环境   一定  不会使用 mock
	 * 默认不适用 mock 使用 需要 参数 传递 (x ,x ,true,x)
	 */
	if (config.env !== 'build') {
		instance.defaults.baseURL = isUseMock ? config.mockApi : config.baseApi
	}

	// 3 发送网络请求   返回一个 fulfill 状态的axios
	// 即promise  v.data  为服务器返回数据 v包含6个
	return instance({
		method,
		url,
		[method.toLowerCase() === 'get' ? 'params' : 'data']: submitData,
	})
}