在 vue3 中加入 mock 模拟请求，并介绍本地代理如何管理 mock 请求以及服务器请求

使用 mock 模拟数据请求，在 vue3 + vite 项目中我们将使用 vite-plugin-mock 插件来实现

1. 安装插件
vite-plugin-mock 高版本会出现 mock 文件夹生成许多 mjs 文件，锁死 2.9.6

yarn add mockjs vite-plugin-mock@2.9.6 -D

2. 配置 vite.config.ts

import { viteMockServe } from 'vite-plugin-mock'
export default {
  plugins: [ viteMockServe() ]
}

3. 在项目根目录下创建 mock 文件夹，在 mock 文件夹下创建 test.ts

/mock/test.ts

export default [
  {
    url: "/mock/getUser",
    method: "GET",
    response: () => {
      return {
        code: 0,
        message: "ok",
        result: ["jiang", "junfeng"],
      };
    },
  }
]

4. 使用

request({
   url: '/mock/getUser',
   method: "GET"
}).then((res)=>{
})

在 vite.config.ts 中配置代理

  server: {
    open: true,
    port: 9999,
    strictPort: true,
    // 设置代理示例
    proxy: {
      "/XXApi": "https://blog.junfeng530.xyz/",
    },
  },

项目地址