企业官网建设流程全解析

第七节：Axios 二次封装 + 手写 Mock 数据，Mock / 真实接口一键切换

核心要点：不引入 mockjs 插件，纯手写 mock 模拟数据；读取环境变量VITE_USE_MOCK控制开关，开启则返回本地模拟数据，关闭则走真实后端网络请求。

步骤 1：安装 axios

pnpm add axios

步骤 2：新建 mock 模拟数据src/mock/index.js

// 手写模拟接口数据exportdefault{// 登录接口'/api/login':(params)=>{const{username,password}=paramsif(username==='admin'&&password==='123456'){return{code:200,msg:'登录成功',data:{token:'mock-token-123456'}}}else{return{code:500,msg:'账号密码错误',data:null}}},// 获取用户信息接口'/api/getUserInfo':()=>{return{code:200,msg:'获取成功',data:{username:'admin',roles:['admin']}}}}

步骤 3：Axios 封装src/utils/request.js

import axios from'axios'import{ElMessage}from'element-plus'import mockData from'@/mock/index'import{useUserStore}from'@/stores/user'// 是否开启mockconstUSE_MOCK=import.meta.env.VITE_USE_MOCKconstBASE_URL=import.meta.env.VITE_API_BASE_URL// 创建axios实例constservice=axios.create({baseURL:BASE_URL,timeout:10000})// 请求拦截器service.interceptors.request.use((config)=>{constuserStore=useUserStore()if(userStore.token){config.headers['Authorization']=`Bearer ${userStore.token}`}returnconfig},(error)=>{returnPromise.reject(error)})// 响应拦截器service.interceptors.response.use(async(response)=>{returnresponse.data},(error)=>{ElMessage.error(error.message||'请求失败')returnPromise.reject(error)})// 手写mock判断封装async functionrequest(config){const{url,method,data,params}=config// mock模式：匹配本地mock接口，不走网络if(USE_MOCK&&mockData[url]){constmockFunc=mockData[url]// get取params，post取dataconstreqParams=method.toLowerCase()==='get'?params:datareturnnewPromise((resolve)=>{// 模拟网络延迟setTimeout(()=>{resolve(mockFunc(reqParams))},300)})}// 非mock模式，走真实axios网络请求returnservice(config)}exportdefaultrequest

步骤 4：统一接口管理src/api/login.js

import request from '@/utils/request' // 登录 export function loginApi(data) { return request({ url: '/api/login', method: 'post', data }) } // 获取用户信息 export function getUserInfoApi(params) { return request({ url: '/api/getUserInfo', method: 'get', params }) }

步骤 5：改造登录页面，调用真实封装后的 api

修改src/views/login/index.vue的 script‑setup 部分

<script setup> import { useUserStore } from '@/stores/user' import { useRouter } from 'vue-router' import { loginApi } from '@/api/login' const router = useRouter() const userStore = useUserStore() const loginForm = reactive({ username: '', password: '' }) const handleLogin = async () => { if (!loginForm.username || !loginForm.password) { ElMessage.warning('账号密码不能为空') return } // 调用接口 const res = await loginApi(loginForm) if (res.code === 200) { userStore.setUserInfo(res.data.token, loginForm.username) ElMessage.success('登录成功') router.push('/dashboard/index') } else { ElMessage.error(res.msg) } } </script>

✅第七节测试

1. 重启项目pnpm dev，当前.env.development中VITE_USE_MOCK=true，开启本地 mock
2. 访问/login
   • 输入账号admin，密码123456→ 登录成功跳转首页
   • 输入错误账号密码 → 弹出【账号密码错误】提示
3. F12 网络面板：不会产生真实网络请求，全部是本地 mock 返回。
4. 测试关闭 mock：修改.env.development中VITE_USE_MOCK=false，重启服务，此时会发起真实网络请求，会报 404（没有后端接口，属于预期现象）。

关键点：切换环境变量VITE_USE_MOCK即可在 mock 模拟数据 / 真实接口之间切换。