Vite 项目中如何去集成 Mock 环境 （插件：vite-plugin-mock）

pnpm install -D vite-plugin-mock mockjs

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 引入 svg 图标所需要的插件
import vue from '@vitejs/plugin-vue'
import path from 'path'
import {viteMockServe} from "vite-plugin-mock";

// https://vitejs.dev/config/
// command 区分项目所处的环境
export default defineConfig(({ command }) => {
  return {
    plugins: [vue(),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 图标的存放目录
        symbolId: 'icon-[dir]-[name]'
      }),
      viteMockServe({
        enable: command === 'serve'  // 保证项目开发阶段可以使用 mock 接口
      })
    ],
    resolve: {
      alias: {
        "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
      }
    },
    // scss 全局变量的一个配置
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable/index.scss";'
        }
      }
    }
  }
})

// example/mock/es.mock.ts

import { MockHandler } from '../../src'

const mocks: MockHandler[] = [
  {
    pattern: '/api/test1/1',
    handle: (req, res) => {
      res.end('Hello world!' + req.url)
    }
  },
  {
    pattern: '/api/test1/*',
    handle: (req, res) => {
      res.end('Hello world!' + req.url)
    }
  },
  {
    pattern: '/api/test1/users/{userId}',
    handle: (req, res) => {
      const data = {
        url: req.url,
        params: req.params,
        query: req.query,
        body: req.body
      }
      res.setHeader('Content-Type', 'application/json')
      res.end(JSON.stringify(data))
    }
  },
  {
    pattern: '/api/test1/body/json',
    method: 'POST',
    handle: (req, res) => {
      res.setHeader('Content-Type', 'application/json')

      //req is incomingMessage which extends stream.Readable 
      // --> https://nodejs.org/api/stream.html#readablereadsize
      // res.end need to be within the function
      // there is a size limit for the bodyString to get parsed 
      req.on('data', (bodyString: string) => { 
        let body: object = JSON.parse(bodyString)
        res.end(JSON.stringify(body))
      })
    }
  },
]

export default mocks

// example/mock/apis/es2.mock.ts

import { MockHandler } from 'vite-plugin-mock-server'

export default (): MockHandler[] => [
  {
    pattern: '/api/test2/1',
    handle: (req, res) => {
      res.end('Hello world!' + req.url)
    }
  },
  {
    pattern: '/api/test2/2',
    handle: (req, res) => {
      res.statusCode = 203
      res.end('Hello world!' + req.url)
    }
  }
]

// example/mock/cjs.mock.js

module.exports = [
  {
    pattern: '/api/merchant1',
    method: 'GET',
    handle: (req, res) => {
      res.end('merchant1:' + req.url)
    }
  },
  {
    pattern: '/api/merchant2',
    method: 'GET',
    handle: (req, res) => {
      res.end('merchant2:' + req.url)
    }
  },
  {
    pattern: '/api/merchant2',
    method: 'GET',
    handle: (req, res) => {
      res.end('merchant3:' + req.url)
    }
  }
]

// example/mock/apis/cjs2.mock.js

module.exports = [
  {
    pattern: '/api/hello1',
    method: 'GET',
    handle: (req, res) => {
      res.end('hello1:' + req.url)
    }
  },
  {
    pattern: '/api/hello2',
    method: 'GET',
    handle: (req, res) => {
      res.end('hello2:' + req.url)
    }
  },
  {
    pattern: '/api/hello3',
    method: 'GET',
    handle: (req, res) => {
      res.end('hello2:' + req.url)
    }
  }
]

const createUserList = () => {
    return [
        {
            userId: 1,
            avatar: 'https://pic1.zhimg.com/80/v2-083faf550543c1e9f134b56b3322ee3c_720w.webp',
            username: 'admin',
            password: '123456789',
            desc: '下船不谈船里事',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token'
        },
        {
            userId: 2,
            avatar: 'https://pic1.zhimg.com/80/v2-e1427f6a21122ac163ff98d24f55d372_720w.webp',
            username: 'system',
            password: '123456789',
            desc: '旧人不谈近况，新人不讲过往',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'Admin Token'
        }
    ]
}
export default [
    // 用户登录接口
    {
      url: '/api/user/login',
      method: 'post',
      response: ({ body }) => {
          // 获取请求体携带过来的用户名与密码
          const { username, password } = body
          // 调用获取用户信息函数，用于判断是否有此用户
          const checkUser = createUserList().find(
              (item) => item.username === username && item.password === password
          )
          // 没有用户则返回失败信息
          if(!checkUser) {
              return {
                  code: 201,
                  data: {
                      message: '账号或者密码不正确'
                  }
              }
          }
          // 如果有返回成功信息
          const { token } = checkUser
          return {
              code: 200,
              data: {
                  token
              }
          }
      }
    },
    // 获取用户信息接口
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            // 获取请求头携带的 token
            const token = request.headers.token
            // 查看用户信息数据中是否包含有此 token 的用户
            const checkUser = createUserList().find((item) => item.token === token)
            // 没有就返回失败信息
            if(!checkUser) {
                return {
                    code: 201,
                    data: {
                        message: '获取用户信息失败'
                    }
                }
            }
            // 有就返回成功信息
            return {
                code: 200,
                data: {
                    checkUser
                }
            }
        }
    }
]

<script setup lang="ts">
import axios from 'axios'
import { onMounted } from "vue";

onMounted(() => {
  // 登录接口
  axios({
    url: '/api/user/login',
    method: 'POST',
    data: {
      username: 'admin',
      password: '123456789'
    }
  }).then(res => {
    console.log(res)
  })
})
</script>

<template>

</template>

<style scoped lang="scss">

</style>