thingsboard的热部署及UI开发

上一篇中我们已经添加了两个批处理文件：

我们要运行TB 的热部署环境，这里，在idea中运行没有异常的条件下，我们将别的TB项目或者服务停掉先，然后先运行第一个批处理文件：

这个文件运行成功后，我们可以访问TB的8080端口，执行正常的TB操作，但是想要修改后台代码，这里需要重新打包或者直接在idea中编译以后再运行才有效果。

同理，我们需要修改UI模块的代码的时候，在第一个批处理文件运行的情况下，执行第二个批处理文件即可，运行效果如下：

3000端口运行比较缓慢，需要等待，这里由于是通过webpack，所以有好多错误提示，这里我们将其忽略，因为这个会用webpack的应该知道。

正真的错误在下面这种地方，比如以下这种情况：

我用的是Sublime Text这个工具编辑UI模块，因为比idea速度快。

这里运行成功并没有出现错误的情况下，我们在浏览器中输入：localhost:3000

访问热部署模式，在热部署模式下，我们用Sublime Text编辑UI模块的代码后，只需ctrl+s保存一下，3000端口运行的命令窗口就会自动打包编译UI模块，我们不需要再进行打包整个项目，然后浏览器中也会自动刷新修改后的效果。

接下来给大家演示一下这个过程：

例如我们需要修改TB默认的logo，这里我们只需要修改几个地方：

第一、修改ui/src/app/login/login.scss：

第二、修改ui/src/svg/logo_title_white.svg文件，这个文件是一个svg图片；

第三、修改ui/src/thingsboard.ico，将这个ico文件替换为你们自己的logo的ico。

每次替换一个文件，或者保存一个文件时，3000端口的命令行就会自动编译一次，我们不需要做过多的操作，等待页面自动刷新即可
（浏览器最上面的那个小图标更换以后，最好重新在浏览器中打开页面，并且清理浏览器缓存）

以上即是效果

下面提一下在QQ群里好多人遇到的UI编辑问题：

1、白标签问题（Whitelabel Error Page）

白标出现的主要原因是因为你修改的UI代码有问题，但是你不知道的情况下打包成功，并且访问了8080 端口。

在这种情况下，我们最好使用启动UI热部署的模式，因为在3000端口下不会报白标签，并且会给你提示出错的代码位置：

我们只需要按照提示修改UI代码，修改完以后重新打包运行8080即可解决问题。

2、svg文件错误

如果你在添加自己的logo的时候，不知道怎么玩转svg文件，第一，你可以跟你们的美工请教，这个是最简单的；第二、可以通过网络转换工具解决，比如https://c.runoob.com/more/svgeditor/这个在线转换网站，转换完svg文件替换即可；第三、自学svg的一些注意的事项，在源码的基础上编译官方的svg文件，这里需要注意的是中文乱码问题

其他的没想到，有何疑问请留言

 

再次宣传一下QQ群：

我们针对物联网项目及TB的二次开发的群，有物联网项目需求的请加群联系群主

QQ群号：726442610

群名称：China Thingsboard