背景

单页面应用开发问题

单页应用随着业务膨胀，资源文件逐渐累积，包体积负荷较大，编译时间过长。因此，考虑从原来的单页面应用中将某些模块抽出来，按需编译和按需部署；那么，原来的单页面应用就变成多页面应用了。

多页面应用带来的问题

• 跨应用跳转时vue-router失效，替代方案为href跳转，可使用url传参或者localStorage共享数据
• 登录拦截问题，需考虑登录组件在哪个应用内，再就是登录完成后的目标页面问题
• 跨应用数据共享问题，不同应用对应不同的数据实例，单页应用的数据共享不再适用
• webpack配置需要调整

公共ui组件模块抽离主工程

应用标识

抽离后工程中包含两个应用模块app（原工程）、demo（公共ui组件）

新增路由配置

不同应用拥有独立的路由

router目录下新增路由配置demo.js，将index.js中demo模块的路由迁移至demo.js

新增入口文件

不同应用拥有不同入口

与main.js同级增加demo.js，基本copy自main.js

统一管理入口

src目录下新建app目录，配置模块入口映射关系

消除单页应用中的耦合

抽出的demo模块，公共配置（各种util、config等）均复用之前的，所以需要消除复用的代码中耦合了 app模块的代码

baseUtil中使用router回退

代码对比

• 这里应该使用对应模块的路由对象，而不是固定的路由
• init方法会在各自模块的入口文件中调用

api/config.js中使用入口文件

代码对比

• 这里目的是使用vux的toast功能
• 使用Vue的全局方法即可

webpack配置改动

为方便开发调试，dev环境下采用多入口文件编译，其他环境则按模块逐一打包，以便于独立部署，先看下后者的效果

• app和demo模块可以独立部署

配置具体改动

打包指令新增--appname 参数

如：npm run build -saber -prod -https://www.xichengjiayuan.com -dist --appname=demo

• appname标识需要打包的应用模块
• 打包命令一定要完整，因为新增的参数对其他参数的获取有影响

输出目录按应用区分

具体改动可见config/index.js、webpack.prod.conf.js相关改动

页面跳转问题

还需商讨，暂未实现