Vite中怎么自制mock服务器
本篇内容主要讲解“Vite中怎么自制mock服务器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vite中怎么自制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>
)
}
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码