H5客户端

WARNING

本文档介绍XSDK-H5版本配置，以及部署方式等；H5客户端SDK采用js，html和vue3等前端技术，您可以下载XBuilder，VSCode等编辑器进行项目的编辑和管理

项目结构

H5客户端源码工程叫sdk-h5-client，该工程是一个vue3.0的标准工程格式. 部分文件说明：

1、 public： 工程编译后，会生成到编译后目录(dist)下的文件；内部有测试游戏html、SDK框架的js文件等、
    --game_test.html： 演示H5 API的调用，可以给到研发参考
	--js/xsdk.js : H5 SDk对外的接入文件， 一般上传到服务器/OSS后，将访问地址给到研发，研发这边在游戏页面引入
	--js/xsdk.internal.js： H5 SDK内部引用文件，负责和xsdk.js交互
	--其他文件
		
2、 src： SDK UI相关的代码文件
3、 .env：环境变量配置文件，比如配置服务端的访问地址
4、 其他文件： 一般不需要改动

参数配置

1、 配置SDK中访问的Server地址：

sdk-h5-client/.env中，VITE_APP_API_BASE_URL设置为SDK Server地址

VITE_APP_API_BASE_URL = http://xsdkapi.u8sdk.com

编译运行

进入sdk-h5-client目录执行：npm install （如果没有安装nodejs，可以先安装nodejs 18.20.2 版本）， 安装依赖。

安装完成后，可以使用如下命令，本地直接开发模式启动：

npm run dev

运行无问题后，可以执行如下命令，编译输出发布目录sdk-h5-client/dist目录：

npm run build

编译成功后，在dist目录下生成的就是H5发布文件。

配置和部署H5项目

将上面生成的dist目录下所有的内容， 部署到web服务即可。 比如nginx、 apache、 OSS等。

部署之后，登录SDK管理后台。 在全局控制台-》全局配置中，完成如下设置：

1、 将【H5 SDK URL】改为部署后的{H5 SDK访问地址}（根地址，不要加具体的文件）；

2、 将【用户中心URL】改为部署后的{H5 SDK访问地址}/index-float.html。 （用于Android/iOS 原生SDK悬浮球点开展示的用户中心）