本指南将详细介绍如何从联犀平台导入 API 接口文档，并配置前端项目使用这些接口。

📋 目录

• 接口文档地址
• 接口文件管理
• 环境配置
• 项目配置
• 接口调用
• 高级配置

🌐 接口文档地址

官方 API 文档

• 中台部分：https://unitedrhino-core.apifox.cn
• 物联网部分：https://unitedrhino-things.apifox.cn

💡 提示：建议收藏这些链接，方便随时查看最新的 API 文档。

📁 接口文件管理

系统管理接口更新

1. 打开 Apifox
2. 项目设置 → 导出数据
3. 选择格式：OpenAPI Spec → OpenAPI 3.0
4. 选择导出范围：导出部分接口
5. 选择接口范围：全选"系统管理new"
6. 导出位置：src/pkg/json/system/ 文件夹

物联网接口更新

1. 打开 Apifox
2. 项目设置 → 导出数据
3. 选择格式：OpenAPI Spec → OpenAPI 3.0
4. 选择导出范围：导出部分接口
5. 选择接口范围：全选"物联网相关接口"
6. 导出位置：src/pkg/json/things/ 文件夹

打包命令

# 系统管理接口打包
npm run system:openapi

# 物联网接口打包
npm run things:openapi

环境配置

package.json配置及打包配置相关

• 配置服务器端前端文件访问路径 package.json -> pro -> --base=/app/system-manage/ ， 根据实际需求配置 base 路径

• 执行 npm run build:pro

• 启动项目： -> npm run dev

env文件配置

• 根据实际需求自行配置环境文件： .env.development .env.production

根容器设置

*** index.html root dom的id设置，该id一定根据自己的项目自行命名，避免微前端加载时容器冲突： index.html ->

***

*** main.ts root dom设置： main.ts -> app.mount('#systemAppContainer') ***

*** 请全局搜索 systemAppContainer ，涉及到的根据自己当前设置的根容器 id 进行全局替换 ***

关于已封装好的 http 函数调用方式

常规调用

• 传入参数： let data = {}

    postUserSelfLogin( data ).then( (res:any)=>{
        // res 存在时，证明服务端已成功响应
        if( res ){

        }
    })

发起http请求时，需要显示全局 loading 调用方式，响应是否成功

postUserSelfLogin( data ,{loading:true,title:"正在登录中..."} ).then( (res:any)=>{
    // res 存在时，证明服务端已成功响应
    if( res ){

    }
})

发起http请求时，http请求结束后需要展示结果提示语配置方式

postUserSelfLogin( data ,{toast:true} ).then( (res:any)=>{
    // res 存在时，证明服务端已成功响应
    if( res ){

    }
})

关于发起http请求配置

• 根据实际项目需求，可对已封装的函数自行修改： service -> handler.ts -> requestHandler函数 和 responseHandler函数

关于路由配置

• 默认不需要将路由新增至 router -> index.ts ， 具体可根据自己的需求处理

• 当前微前端开发环境下路由注册方式，自行在router -> modules文件夹下创建路由文件，并将开发环境的路由文件统一引入当前文件夹的index.ts文件进行导出： router -> modules -> index.ts

全局组件注册

• 组件注册目录： plugins -> index.ts

关于全局注册 @ant-design/icons-vue

• 默认已经将 ant-design/icons-vue 提供的icon图标组件全部注册，具体使用方法如下：

<component :is="'PlusOutlined'"></component>