Skip to content

服务端配置

采用nitro作为mock数据服务。

为什么使用nitro

我们希望的是mock服务尽可能的不要侵入到我们的项目中和尽可能少的修改项目的代码,nitro作为一个独立的服务,抽离到servers目录下,不会对项目产生任何影响。

优点

  • 无侵入性
  • 独立的服务
  • 可以使用nodejs的任何模块
  • 可以使用typescript进行开发
  • 热更新支持
  • 小项目可以直接使用nitro进行开发后端服务

如何使用nitro

具体的使用,大家可以参考Nitro Docs

移除nitro

自己开发了后端服务,不需要nitro了,那么如何移除呢?

可以直接删除servers目录,

v1.0.0-beta.1开始不在依赖多包管理模式,之前的版本需要删除掉pnpm-workspace.yaml中的servers配置

重新pnpm install即可完成移除。

混合使用

在开发后端的过程中,考虑到开发者并不会一次性的对接所有的数据结构,所以我们提供了一种混合使用的方案,

方便在开发完成一个接口以后,可以进行立即调试,也不会影响其他mock接口的访问,等完成全部接口的开发后只需要进行环境变量的替换即可。

注意

需要注意的是这种模式只允许在开发模式下使用,在生产环境下不会生效!!!

首先你需要在.env.development中增加如下的配置:

diff
+ VITE_APP_BASE_API_DEV=/dev-api
# 你本地服务开发环境server地址,例如:http://127.0.0.1:8000
+ VITE_APP_BASE_URL_DEV=http://127.0.0.1:8000/
+ VITE_APP_BASE_API_DEV=/dev-api
# 你本地服务开发环境server地址,例如:http://127.0.0.1:8000
+ VITE_APP_BASE_URL_DEV=http://127.0.0.1:8000/

然后在你需要自行调试接口的部分增加一个属性进行控制,例如登录接口:

diff
export const loginApi = (params: LoginParams | LoginMobileParams) => {
  return usePost<LoginResultModel, LoginParams | LoginMobileParams>('/login', params, {
    // 设置为false的时候不会携带token
    token: false,
    // 开发模式下使用自定义的接口
+    customDev: true,
  })
}
export const loginApi = (params: LoginParams | LoginMobileParams) => {
  return usePost<LoginResultModel, LoginParams | LoginMobileParams>('/login', params, {
    // 设置为false的时候不会携带token
    token: false,
    // 开发模式下使用自定义的接口
+    customDev: true,
  })
}

useGetusePutuseDelete都会存在一个config配置项,都是通过第三个参数进行配置。

ts
useGet(url, params, config)
useGet(url, null, {
  customDev: true,
})

usePut(url, params, config)
usePut(url, null, {
  customDev: true,
})

useDelete(url, params, config)
useDelete(url, null, {
  customDev: true,
})
useGet(url, params, config)
useGet(url, null, {
  customDev: true,
})

usePut(url, params, config)
usePut(url, null, {
  customDev: true,
})

useDelete(url, params, config)
useDelete(url, null, {
  customDev: true,
})

Made by Antdv Pro Team with ❤️ Aibayanyu