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网站项目的分别打包。
  • 权限校验
    我们找出 两个网站的对应路由 并分别进行判断
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,287评论 8 124
  • 来源:github.com Vue.js开源项目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei阅读 11,726评论 1 159
  • 姓名:沈丹萍 公司:宁波大发化纤有限公司 《六项精进》289期学员 组名:反省二组 【日精进打卡20天】 【知~...
    好运到来阅读 188评论 0 0
  • 课程结束快二十天了,考试过去也快半个月了。之前以为,如果这次没考好,我一定会要死要活,再次陷入深深的绝望。而现在,...
    小毛爱下厨阅读 328评论 0 0
  • 猫魂nu阅读 211评论 1 0