Layui 说我到底哪里得罪了你

前言

最近副业接到一个 layui 前端的项目，看着代码非常的工整，逻辑也非常的清晰，可是架不住学习成本，和后续维护行，为了支持 vue，我花了 3 天时间终于把layui 的代码和 vue 结合在了一起，采用 nginx 反向代理的形式完成了整体的部署，后续可以开开心心的用 vue 开发新功能了。

Layui 有点讨厌我

其实说不上讨厌，但是真架不住学习成本，下面我贴张相关项目图，html 目录结果很清晰 template、script 包括 script 有统一的定义变量、导入组件、方法、请求等。这如果单纯开发一个新的页面，我该怎么办，思考了很久，有点废脑细胞、废代码。

兼容很简单，过程考虑了挺久

将原项目放置到 public 目录下，作为静态项目，如下图所示，通过 vue 将 layui 包裹起来，将 vue 的菜单风格和 layui 菜单保持一致，新增功能时跳转到 vue，旧页面跳转到 layui，其实真正实施起来确实花了 2、3 天来琢磨怎么兼容比较好使

部署

vue 通过 npm run build 会将 public 下的静态文件进行打包，然后整个 dist 文件就通过 nginx 配置相应的网站，完成了部署，兼容 layui 项目就简单了，直接通过 nginx 反向代理来实现，贴代码，如下所示,index.html 相当于是 vue 的工程首页，indexV1.html 则是老代码的首页。

location /old {
        try_files $uri $uri/ /indexV1.html;
}
location /new {
        try_files $uri $uri/ /index.html;
}