您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“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> ) }
到此,相信大家对“Vite中怎么自制mock服务器”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。