前言

由于之前的接觸的到的管理程序都是后端代碼和前端分別打包放在，然后利用 Nginx 做代理，將兩個代碼進行訪問。但是看 Soul 啟動時是直接能將前端代碼進行訪問，是有什么黑魔法么？
還是將前端代碼直接打包好放入 Soul Admin 中呢？還是有其他方法呢？

Static 靜態(tài)文件

驗證是否含有靜態(tài)文件

查看源代碼，確實有靜態(tài)文件，

static

我們先驗證一下，是不是這里，刪除這塊代碼然后再啟動，果然頁面就辦法訪問了。

訪問頁面

總結(jié)

利用編譯好的前端靜態(tài)文件，減少了使用者的兩次編譯部署(前端編譯打包一次，后端代碼打包一次)的麻煩，但這樣對于前端代碼的更新，static 目錄就要隨著更新，那這樣的話，soul-dashboard 的目錄不就沒什么作用了么？那他有扮演著什么樣的角色呢？

soul-dashboard 的作用

查看 soul-admin 的 pom.xml 時發(fā)現(xiàn)這么一個插件

erislett插件

查看 eirslett 插件的 github 地址, 介紹有這么一段話：
this plugin downloads/installs Node and NPM locally for your project
這個意思就是說，在本地執(zhí)行前端代碼的編譯的工作。安裝 npm 的教程，可以參考
安裝Node.js和npm, 如果沒安裝 npm 和 nodejs 也沒關(guān)系，該插件會幫你進行安裝。

根據(jù) soul-admin 中的 pom.xml 上的注釋，我們修改項目中的 pom 文件，結(jié)果如下圖所示：

image.png

再次重啟。發(fā)現(xiàn)還是無法訪問，再次查看 pom.xml 文檔，發(fā)現(xiàn)前端代碼的工作目錄為：soul-dashboard, 如下圖所示

工作目錄為 soul-dashboard

查看源代碼中 soul-dashboard 文件，發(fā)現(xiàn)為空。查看源代碼，發(fā)現(xiàn) git 子模塊的設(shè)置，如下圖所示：

前端子模塊代碼

使用命令 git submodule update --init --recursive, 更新代碼，成功后如下圖所示

更新子模塊

再次啟動。又發(fā)現(xiàn)報錯了

npm報錯

修改如下：

pom.xml

好了，再次執(zhí)行命令mvn clean install后發(fā)現(xiàn)，之前刪掉的文件又回來了。

static 中的文件

為了防止每次都編譯前端代碼，可以將項目根目錄下的 pom 文件中配置 frontend.plugin.skip 修改成 true
啟動程序，有可以愉快開心的玩耍了。

總結(jié)：

1. 一鍵打包安裝是最快的。但是自己去打包去安裝，還是能發(fā)現(xiàn)更多的知識。
2. frontend-maven-plugin 插件之前沒有用過，發(fā)現(xiàn)用在管理后臺上還是很不錯的。
3. 遇到問題不要怕，一個一個的解決唄。