使用WEBUI作為插件是因為網上的資料相對較多，之前看到很多人推薦BLUI，我嘗試了一下，沒有找到能讀明白的教程。
之前也用過WEBUI實現UE4與WEB的展示和雙向交互，不過那是基於原生的HTML和JS，這次想在VUE中實現頁面，正好學習一下前端知識。
UE4中我們要新建GameModeBase和InterfaceHUD，然后在項目設置中使用剛才新建的GameModeBase，GameModeBase中要使用剛才新建的InterfaceHUD。
在HUD中，藍圖如下
然后就是WEB部分，這里我們先實現一個簡單的，准備一個HTML頁面，在<head>標簽內加一個<script>標簽，里面內容如下：
"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue .interface = {}, ue.interface.broadcast = function (e, t) { if ("string" == typeof e) { var o = [e, ""]; void 0 !== t && (o[1] = t); var n = encodeURIComponent(JSON.stringify(o)); "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "", "#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document .location.hash = n, document.location.hash = encodeURIComponent("[]")) } }) : function (e) { ue.interface = {}, ue.interface.broadcast = function (t, o) { "string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, "")) } }(ue.interface), (ue4 = ue.interface.broadcast);
ue4("abc"); //web調用UE4內的方法、事件,參數是方法名，可以有第二個參數，它是第一個參數的參數
ue.interface.ABC = function(){
//...UE4調用web里的方法，ABC是方法名，括號內也可以傳參數
}
上圖中LoadURL這個節點的參數是一個網址，可以是任意網頁的網址，也可以是本地服務的網址，圖中我用的就是后者，當然目前的情況，可用LoadFile節點，參數是文件的路徑。
注意WEBUI這個插件，默認你把前端相關文件都放在一個叫UI的文件夾，這個UI文件夾就放在項目根目錄就行，然后LoadFile中的文件路徑，默認根路徑是UI，比如index.html在UI下，就直接在參數位置寫index.html。
事實上以本地服務的地址作為LoadURL的參數還存在問題，比如我必須先將WEB項目運行，然后UE4中才能通過LoadURL訪問到頁面，雖說可以通過C++開啟本地服務，但開啟本地服務並不等於WEB頁面就運行在上面了，不過目前這不是我要考慮的問題，只要關注插件如何使用，和VUE相關的技術即可。