配置前言

通过本章，您将学会如何使用HBuilderX开发工具通过NIUSHOP单商户uniapp开源版编译H5。并且部署到服务器，快快跟着作者的脚步一步一步操作吧！！

【特别提示】由于配置需要涉及到NGINX等相关配置，这里不推荐使用虚拟主机。

准备工具

在操作部署之前，我们需要准备一下材料和工具：

NIUSHOP开源系统

Uniapp开源版源码

HBuilderX开发者工具

宝塔面板

操作开始

首先我们到NIUSHOP后台下载Uniapp开源版源代码，点击系统后台顶部小程序—微信小程序—小程序源码下载（详见图1-1）点击进入之后提示未购买将提示并引导购买（详见图1-1-2）

（图1-1 ↑ 引导下载小程序源代码）

（图1-1-2 ↑ 提示未购买并引导购买）

已购买小程序的，会有小程序下载入口并显示当前小程序的版本号、发布时间等相关信息，此时我们可以下载开源版小程序代码（详见图1-1-3），注意：编译版小程序代码除了配置之类的信息外，是不可以进行二次开发的操作，如需二开，需购买源码版小程序。

（图1-1-3 ↑ 下载开源版源代码）

下载开源版小程序解压之后，我们需要到HBX官网下载HBuilderX工具()，点击download—正式版—根据电脑系统选择对应的版本，这里选择Windows版中的APP开发版（详见图1-1-4）

（图1-1-4 ↑ 下载HBuilderX开发版工具）

将下载好的BHX解压出来之后，双击HBuilderX.exe打开HBuilderX开发工具（详见1-1-5）

（图 1-1-5 ↑ 打开HBuilderX开发者工具）

打开HBX之后（中间的一些操作忽略），我们需要进行安装插件，点击顶部菜单栏中的：工具—插件安装【注意：由于HBuilderX迭代过快，这里以老版本为示范，新版本请举一反三】（详见图1-1-6）

（图1-1-6 ↑ HBX界面安装插件）

在安装插件界面找到SCSS/SASS编译/Node.js插件，点击安装，安装过程中，静等5-10分钟即可（详见图1-1-7）

（图1-1-7 ↑ 安装SCSS/SASS编译/Node.js插件）

下载好Uniapp源代码之后，我们可以通过HBuilderX进行导入，可以看到我们Uniapp源代码结构（详见图1-1-8）

（图 1-1-8 ↑ Uniapp源代码 ）

我们看到Uniapp源代码结构之后，我们可以点击common—JS—config.js中，将代码中的baseUrl、imgUrl、shareDomain、privateKey进行一一填入（详见图1-1-9），相关说明如下：

① baseUrl：请求数据的网址，填写站点网址，如： 尾部不需要添加“ / ” ；

② imgUrl：图片网址，该处为可选，如填写请输入自己网站域名，便于调用图片数据；

③ shareDomain：分享跳转H5域名，该处为可选，如需要那么必须为: ；

④ privateKey：网站后台API安全密钥，该处为可选，但建议您开启安全密钥，防止中间人进行抓包窃取相关数据，API安全密钥获取和相关操作的请移步：系统后台基础设置>>API安全

（图1-1-9 ↑ 配置config.js）

上述配置完成之后，我们点击HBuilderX菜单栏中的发行——网站-H5手机版—输入网站标题和网站域名并点击发行—等待5-10分钟，HBuilderX开发工具会提示编译成功（详见图1-1-10）

（图 1-1-10 ↑ 编译H5）

编译好的H5代码上传

点击进入站点根目录（详见图2-1）

（图 2-1 ↑ 进入站点根目录）

我们可以通过宝塔面板，点击上传按钮，打开我们编译好的H5文件，将文件拖入到宝塔上传窗口（提示：这里以宝塔7.3.0版本为例），点击开始上传，此时根目录会多了一个h5文件，我们可以通过站点/h5进行访问到我们的H5页面（详见图2-1-2）

（图 2-1-2 ↑ 上传H5文件）

配置站点文件

我们回到我们宝塔站点界面，点击网站名，他会弹出一个配置窗，我们点击配置文件，在server中添加以下代码（详见3-1）配置好之后，点击保存即可。

（图 3-1 ↑ 配置server）

  #H5location /h5{      	if (!-e $request_filename) {          	rewrite ^/(.*) /h5/index.html last;          	break;      	}  	}

如何根据手机终端跳转到H5端呢？接下来，我们依旧在宝塔server配置文件中添加以下代码，注意：这里不会像官网那样在网址后面加H5，咋们此处直接强制跳转到H5，不会显示H5尾巴，NGINX会自动判断，不影响PC访问【提示：该规则影响伪静态，编者正在优化中】（详见图3-1-2）

（图3-1-2 ↑配置server）

location / {            #注释：这里以您的站点文件路径为准            root /www/wwwroot/139.199.185.215;             if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {                #注释：这里是H5文件路径                root /www/wwwroot/139.199.185.215/h5;                }            try_files $uri $uri/ /h5/index.html;        }

末文提示和总结

如果遇到修改没有任何反应时，可以重启一下NGINX，不会配置的，可以直接联系作者。

【版权申明】文章为作者原创，未经作者许可，禁止转载。作者署名：笨小猪（刘飞云）