vue + nodeJs SPA 和 nodeJs + ejs网站项目整合

背景

** 目前对一个多页面的nodeJs express网站和 VueSPA 做了整合，这个过程如下。**

类似于很多综合管控系统网站如阿里云。 此次修改的项目整体由一个多页面的介绍网站 和一个控制台构成，网站由nodeJs + ejs 模板 构成的多页面项目，控制台是由前端Vue + 服务端NodeJs + thirft构成的一个前端SPA项目 ，在修改之前 两者是独立的通过对用户登录权限判断进行页面跳转，目前的需求就是将这两个项目合并到一个项目下，启一个服务实现对整个网站的访问

image

网站文件目录

image

vue 项目目录

image

**整个项目合并起来，涉及到的问题以及解决步骤如下 **

• 路由冲突的问题 （诸如普通路由冲突 以及两个项目的默认路由冲突 "/" ）
• 模板引擎冲突 修改为统一的模板引擎
• 静态资源冲突， 由于两个项目都是nodeJs Express 启动的服务。需要对静态资源目录进行重新划分
• controller 合并
• 权限校验中间件 统一。
• 工程化 nodeJS网站项目使用gulp 打包。 vue 使用webpack打包。

其实难点主要在于 工程化的设计 和 权限校验判断 ，其他的无非就是目录的重新划分 ，使得原本两个项目放到一个大的目录下显得合理。

• 工程化设计 纯nodeJS使用gulp 打包， vue 项目使用webpack 这里我们线上环境部署 可以通过脚本直接分别执行对vue 和 nodeJS网站项目的分别打包。
• 权限校验
  我们找出 两个网站的对应路由 并分别进行判断