内嵌H5端口

背景

内嵌H5端口主要提供手机端（包括：H5，微信内、微信小程序、安卓应用，iOS应用）下的图文、电子书、考试等模块的渲染。为什么需要额外引入此端口？因为统一的H5渲染方式才能做到各端口的最完美兼容（比如：Katex公式渲染、代码高亮渲染、富文本内容样式渲染等等）。

此项目是使用 React18 + Ant.design 开发，在安装本程序之前，您需要配置有下面的环境：

• Node >= v18
• pnpm

浏览器打开网址 https://nodejs.org/en/download 根据您的机器操作系统选择对应的 Nodejs 软件下载，下载以后安装打开安装包进行安装即可。

编译程序

交付给客户的程序压缩包解压之后可以看到 interface-h5-embed 目录，此目录下的程序就是内嵌H5程序。进入到此目录，然后执行下面命令：

pnpm i

上述命令将会安装程序所需要的依赖。执行完成之后，继续执行下面命令：

cp .env.example .env.production

上述命令是生成生产环境编译下所需要的配置文件。打开 .env.production 文件将其中的配置按照下面要求修改：

VITE_APP_URL=你的meedu的api服务请求地址(https://开头)
VITE_APP_GO_MEEDU_URL=你的go-meedu服务请求地址

下面举个例子：

VITE_APP_URL=https://demo-api.meedu.xyz
VITE_APP_GO_MEEDU_URL=https://demo-go-api.meedu.xyz

配置文件修改完成之后，就可以执行下面命令编译程序了：

pnpm build

编译成功之后会在当前程序目录下生成 dist 目录，此目录就是程序编译后的产物。请继续看下面教程完成编译后产物的部署操作。

部署程序

首先，我们将 dist 目录压缩成 zip 压缩包。然后我们进入宝塔面板后台，进入到站点管理，找到 meedu API 程序的站点，然后点击它的目录，进入到文件管理界面，如下图：

到此，部署成功。