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 class="lazy" data-src/lib/ touch class="lazy" data-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 = 10000export 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服务器”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！