摘要：最近一个项目没有后端配合，临时使用使用Axios-Mock-Adapter来mock数据的逻辑，简单记录下使用步骤如下
1. 安装Axios-Mock-Adapter
首先，安装Axios-Mock-Adapter。Axios Mock Adapter 是一个用于模拟 Axios 请求和响应的库，主要用于测试和开发环境中。它通过拦截 Axios 的请求来提供自定义的响应，从而避免在测试中进行实际的网络请求。
npm install axios-mock-adapter --save
接着，创建Axios实例，这一步src/utils/request.js中已完成
import axios from 'axios'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000
})export default service2. 创建模拟数据文件
然后，创建模拟数据文件src/mock/index.js配置 Axios Mock Adapter，以模拟请求和响应。创建一个 Mock Adapter 实例并将其与Axios实例关联。这样，当发出请求时，Mock Adapter 就会拦截这些请求
// import axios from 'axios'
import AxiosMockAdapter from 'axios-mock-adapter'
import request from '@/utils/request' // 引入上面创建的 Axios 实例const mock = new AxiosMockAdapter(request)// Mock GET 请求
mock.onGet('/api/data').reply(200, {message: 'Hello World'
})// Mock POST 请求
mock.onPost('**/api/sys/login**').reply(200, {data: {token: '8fa22e88-f6ab-4a4b-930a-a5e62c4c74e8'},message: '登陆成功',success: true
})export default mock
3. 引入文件并在组件中使用
再然后，在在主入口文件main.js中引入 Mock
import '@/styles/index.scss'
// 导入svgIcon
import installIcons from '@/icons'
// 导入mock
import '@/mock/index.js'const app = createApp(App)
installElementPlus(app)
最后，在Vue组件中使用Mock 数据，此处调用登录接口。当你使用 Axios 发送请求时，如果请求匹配已定义的 Mock 响应，Mock Adapter 会返回你设置的响应，而不执行真实的网络请求。
// 登陆动作处理
const loading = ref(false) // 使用ref声明的数据默认值false
const loginFormRef = ref(null) // 使用ref声明的数据默认值null,用于获取组件实例
const store = useStore()
const handleLogin = () => {// 1.进行表单校验loginFormRef.value.validate((valid) => { // vue3的compsition API中没有this.refsif (!valid) return// 2.触发登陆动作loading.value = truestore.dispatch('user/login', loginForm.value).then((res) => {console.log(res) //返回数据：data: {token: '8fa22e88-f6ab-4a4b-930a-a5e62c4c74e8'},message: "登陆成功",success: trueloading.value = false// 3. TODO:进行登陆后处理}).catch((err) => {console.log(err)loading.value = false})})
}
启动项目验证。
