Vite中自制mock服务器(不使用第三方服务)

为什么要 mock？

• 后台接口还没完成，但前端要用到接口

• 我想篡改后台接口的结果，测试一些分支逻辑

起步

本篇文章会使用到 swr、axios、vite-plugin-mock，请自行安装

配置 vite进入 vite.config.ts，添加以下代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => ({
 plugins: [
   react(),
   viteMockServe()
 ],
}))

创建 mock 数据

• 创建 mock/test.ts 文件

mkdir mock/ && touch mock/test.ts

• 添加 mock 数据

import { MockMethod } from 'vite-plugin-mock'
export default [
 {
   url: '/api/v1/me',
   method: 'get',
   response: () => {
     return {
       id: 1,
       name: 'Niki'
     }
   }
 }
] as MockMethod[]

使用 useSWR

在使用到的组件中用:

import useSWR from 'swr'
import axios from 'axios'

export const Home: React.FC = () => {
 const { data, error, isLoading } = useSWR('/api/v1/me', path => {
   return axios.get(path)
 })

if (isLoading) {
   return <div>加载中...</div>
 }
 if (error) {
   return <div>加载失败</div>
 }

return (
   <div>Hi, I am {data.name}!</div>
 )
}

判断是否在开发环境

在 vite.config.ts 里添加

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => ({
+ define: {
+   isDev: command === 'serve' // 它会写在 window.isDev = true / false
+ },
 plugins: [
   react(),
   viteMockServe()
 ],
}))

封装请求

这里只是简单的封装一下 Axios

mkdir src/lib/ touch src/lib/ajax.tsx

import axios from 'axios'

axios.defaults.baseURL = isDev ? '/' : 'xxx' // 'xxx' 改为线上的 ip:端口
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.timeout = 10000

export const ajax = {
 get: (path: `/${string}`) => {
   return axios.get(path)
 }
}

最终使用

import useSWR from 'swr'
import { ajax } from '../lib/ajax'

export const Home: React.FC = () => {
 const { data, error, isLoading } = useSWR('/api/v1/me', path => {
   return ajax.get(path)
 })

if (isLoading) {
   return <div>加载中...</div>
 }
 if (error) {
   return <div>加载失败</div>
 }

return (
   <div>Hi, I am {data.name}!</div>
 )
}

来源：https://juejin.cn/post/7222237243527233573