Mock 接口实现
创建 Home Mock 接口
在 mock/ 目录下创建 home.ts，使用 vite-plugin-mock 提供的 defineMock 方法定义接口：
// mock/home.ts
import picData from './json/picData.json'
import data from './json/data.json'
const prefix = '/api/v1'
export function getImage(number: number) {
return data
.sort(() => Math.random() - 0.5)
.slice(0, number)
.map((item: any) => {
const pic = picData.find((o: any) => o.url === item.image)
return {
image: `/api/assets/${pic?.name}`,
title: item.title,
subtitle: '',
url: '/course/1',
}
})
}
export default [
{
url: `${prefix}/home`,
method: 'get',
statusCode: 200,
response: () => {
return {
code: 200,
data: {
swipes: [
{ image: '/api/image/bg.png', url: '/project/1' },
],
projects: [/* ... */],
courses: getImage(6),
swipeProjects: [/* ... */],
},
}
},
},
]
ts
图片资源接口
Mock 文件夹独立于 src 目录，无法直接 import 项目中的资源图片。解决方案是创建一个图片资源接口：
// mock/assets.ts
import fs from 'fs'
import path from 'path'
export default [
{
url: '/api/assets/:name',
method: 'get',
rawResponse: async (req, res) => {
// 从 URL 中解析图片名称
const imageName = req.url?.replace('/api/assets/', '')
const imagePath = path.resolve(__dirname, 'downloads', imageName!)
if (fs.existsSync(imagePath)) {
const buffer = fs.readFileSync(imagePath)
res.end(buffer)
} else {
res.statusCode = 404
res.end('Not Found')
}
},
},
]
ts
在 home.ts 中通过接口路径引用图片：
const bg = '/api/image/bg.png'
ts
随机数据生成
使用 sort + Math.random 实现数组随机打乱，再用 slice 截取指定数量：
data
.sort(() => Math.random() - 0.5) // 随机排序
.slice(0, number) // 截取前 N 条
.map(item => ({ /* 格式化 */ }))
ts
通过 picData.json 建立线上 URL 与本地文件名的映射关系，解决跨域图片问题。
Axios 请求封装
安装依赖
pnpm install axios
bash
创建 Axios 实例
// src/utils/axios.ts
import type {
AxiosInstance,
AxiosRequestConfig,
AxiosResponse,
AxiosError,
InternalAxiosRequestConfig,
} from 'axios'
import axios from 'axios'
// 创建 Axios 实例
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_PREFIX,
timeout: 10000,
})
// 请求拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 可在此添加 token 等认证信息
return config
},
(error: AxiosError) => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
return response
},
(error: AxiosError) => {
console.error('请求错误:', error.message)
return Promise.reject(error)
}
)
export default service
ts
Vite 环境变量配置
创建 .env 文件：
# 开发环境
VITE_BASE_URL=http://localhost:5173
VITE_API_PREFIX=/api/v1
text
创建 .env.production 文件（生产环境）：
# 生产环境
VITE_BASE_URL=https://your-server-domain.com
VITE_API_PREFIX=/api/v1
text
注意：Vite 环境变量必须以
VITE_前缀开头，否则在代码中无法通过import.meta.env访问。
API 模块化组织
按模块创建 API 文件：
// src/api/home.ts
import axios from '~/utils/axios'
export async function getHomeData() {
return axios.get('/home')
}
ts
src/api/
home.ts // 首页相关接口
course.ts // 课程相关接口
user.ts // 用户相关接口
order.ts // 订单相关接口
text
在页面中调用
// src/pages/index.vue
import { getHomeData } from '~/api/home'
onBeforeMount(async () => {
const res = await getHomeData()
console.log(res.data)
})
ts
完整开发工作流
1. 定义接口文档（ShowDoc）
|
2. 创建 Mock 接口（mock/ 目录）
|
3. 封装 Axios 请求（utils/axios.ts + api/ 模块）
|
4. 页面调用 API，替换静态 Mock 数据
|
5. 后端接口就绪后，切换 .env 中的 baseURL
|
6. 生产环境使用 .env.production 配置
text
关键注意事项
| 事项 | 说明 |
|---|---|
| Mock 接口 URL 前缀 | 使用常量定义 prefix，避免硬编码 |
| 图片资源路径 | Mock 中的图片通过独立接口响应，不能直接 import src 中的资源 |
| 环境变量前缀 | Vite 要求环境变量以 VITE_ 开头才能被读取 |
| Axios baseURL | 拼接 VITE_BASE_URL 和 VITE_API_PREFIX 两个变量 |
| JSON 数据引入 | 在 tsconfig.json 中设置 resolveJsonModule: true |
| 生产环境切换 | 通过 .env.production 文件配置线上地址，打包时自动使用 |
JSON 数据引入配置
在 tsconfig.json 中添加 JSON 模块解析支持：
{
"compilerOptions": {
"resolveJsonModule": true,
// ...
},
"include": [
"mock/**/*.ts",
"mock/**/*.json"
]
}
json
↑