## 一、下载 “HBuilderX” 前端开发工具 并安装
HBuilderX 下载地址:[https://www.dcloud.io/hbuilderx.html](https://www.dcloud.io/hbuilderx.html)
<br>
## 二、导入uniapp项目
* 打开HBuilderX -> 顶部菜单栏 -> 文件 -> 导入 -> 从本地目录导入 -> 选择uniapp端项目目录
![](https://img.kancloud.cn/e6/51/e6513669a8a5534d016755926bbf1232_1040x713.png)
<br>
* 找到config.js文件,找到里面的apiUrl项,填入已搭建的后端url地址
<br><br>
![](https://img.kancloud.cn/90/49/9049e2685bca7e40bd607ec8c471f581_1037x735.png)
<br><br>
## 三、打包发行(H5)
* 打开HBuilderX -> 顶部菜单栏 -> 发行 -> 网站H5-手机版
* 打包后的文件路径:/unpackage/dist/build/h5
* 将打包完成的所有文件 复制到商城后端/public目录下,全部替换
![](https://img.kancloud.cn/96/9d/969d2d4532423a36b9d67d73b8effeda_1036x709.png)