前言

由于之前的接触的到的管理程序都是后端代码和前端分别打包放在，然后利用 Nginx 做代理，将两个代码进行访问。但是看 Soul 启动时是直接能将前端代码进行访问，是有什么黑魔法么？
还是将前端代码直接打包好放入 Soul Admin 中呢？还是有其他方法呢？

Static 静态文件

验证是否含有静态文件

查看源代码，确实有静态文件，

static

我们先验证一下，是不是这里，删除这块代码然后再启动，果然页面就办法访问了。

访问页面

总结

利用编译好的前端静态文件，减少了使用者的两次编译部署(前端编译打包一次，后端代码打包一次)的麻烦，但这样对于前端代码的更新，static 目录就要随着更新，那这样的话，soul-dashboard 的目录不就没什么作用了么？那他有扮演着什么样的角色呢？

soul-dashboard 的作用

查看 soul-admin 的 pom.xml 时发现这么一个插件

erislett插件

查看 eirslett 插件的 github 地址, 介绍有这么一段话：
this plugin downloads/installs Node and NPM locally for your project
这个意思就是说，在本地执行前端代码的编译的工作。安装 npm 的教程，可以参考
安装Node.js和npm, 如果没安装 npm 和 nodejs 也没关系，该插件会帮你进行安装。

根据 soul-admin 中的 pom.xml 上的注释，我们修改项目中的 pom 文件，结果如下图所示：

image.png

再次重启。发现还是无法访问，再次查看 pom.xml 文档，发现前端代码的工作目录为：soul-dashboard, 如下图所示

工作目录为 soul-dashboard

查看源代码中 soul-dashboard 文件，发现为空。查看源代码，发现 git 子模块的设置，如下图所示：

前端子模块代码

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

更新子模块

再次启动。又发现报错了

npm报错

修改如下：

pom.xml

好了，再次执行命令mvn clean install后发现，之前删掉的文件又回来了。

static 中的文件

为了防止每次都编译前端代码，可以将项目根目录下的 pom 文件中配置 frontend.plugin.skip 修改成 true
启动程序，有可以愉快开心的玩耍了。

总结：

1. 一键打包安装是最快的。但是自己去打包去安装，还是能发现更多的知识。
2. frontend-maven-plugin 插件之前没有用过，发现用在管理后台上还是很不错的。
3. 遇到问题不要怕，一个一个的解决呗。