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

更新時間：2023年04月16日 16:22:29 作者：陳楠112

本文主要介紹了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()
  ],
}))

創(chuàng)建 mock 數(shù)據

創(chuàng)建 mock/test.ts 文件

mkdir mock/ && touch mock/test.ts

添加 mock 數(shù)據

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>
  )
}

判斷是否在開發(fā)環(huán)境

在 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服務器(不使用第三方服務)的文章就介紹到這了,更多相關Vite mock服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue.js組件tree實現(xiàn)無限級樹形菜單
這篇文章主要為大家詳細介紹了Vue.js組件tree實現(xiàn)無限級樹形菜單代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue無后端配合實現(xiàn)導出功能的示例代碼
這篇文章主要為大家詳細介紹了Vue如何在無后端配合的情況下實現(xiàn)導出功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以跟隨小編一起了解一下
2024-01-01
vue & vue Cli 版本及對應關系解讀
這篇文章主要介紹了vue & vue Cli 版本及對應關系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
淺談vue中所有的封裝方式總結
因為現(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下
2021-07-07
vue3+vite:src使用require動態(tài)導入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
vue 左滑刪除功能的示例代碼
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
Element Cascader 級聯(lián)選擇器的使用示例
這篇文章主要介紹了Element Cascader 級聯(lián)選擇器的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報錯問題
mock.js:是一款模擬數(shù)據生成器,可以生成隨機數(shù)據,攔截 Ajax 請求,使用mockjs模擬后端接口,可隨機生成所需數(shù)據,模擬對數(shù)據的增刪改查,本文給大家介紹了Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報錯問題,需要的朋友可以參考下
2025-04-04
Vue解決移動端彈窗滾動穿透問題
這篇文章主要介紹了Vue解決移動端彈窗滾動穿透問題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue如何自定義組件v-model
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07