需求
一个平台P,包含产品a、b、c、d、e。各产品UI样式风格统一,且会用到公共配置(HOST、是否添加埋点js)、组件(头部导航、表格、搜索框)、方法(请求拦截、生成UUID)。
现状:由于历史遗留原因,各产品为独立SPA、各自维护,配置、组件也都自成一体,只是大概样式上保持了一致,但细节(比如同一面包屑样式,左边距5px、8px都有)都不一致。
这种情况下,改组件、改配置都得一改改多个地方,且有些项目是vue-cli2、有些是vue-cli3,项目间依赖包的版本也不一致,维护起来非常不友好。
目标:整合各产品单页应用为MPA,提取公共文件(主题、配置、组件、方法),减少规范性东西的维护成本。
目录结构对比
整合前

bds-bank-fe
│ README.md
│
│// 静态资源输出目录
│
└───dist
│ └───index.html + static // 平台首页
│ └───label // 产品a
│ │ └───index.html + static
│ └───metrics // 产品b
│ └───service // 产品c
│ └───help // 产品d
│
│// 项目路径
│
└───help-center // 产品d
└───portal-page // 平台首页
└───service-doc // 产品c
└───unify-label // 产品a
└───unify-metrics // 产品b
│ └───build
│ └───config
│ └───src整合后

│// 静态资源输出目录
│
└───dist
│ └───index.html
│ └───label.html
│ └───metric.html
│ └───service.html
│ └───stocktake.html
│ └───css
│ └───js
│ └───img
├── public
│ └───favicon.ico
│ └───index.html
│
│// 项目路径
│
├── src
│ └── assets
│ └── components
│ ├── pages
│ ├── index
│ ├── label
│ ├── metric
│ ├── service
│ ├── stocktake实现
vue-cli 3.0官方支持多页,重点在于vue.config.js文件中pages这个配置项,每个页面单独配置entry、template、filename等。pages配置说明
// 官网示例如下
module.exports = {
pages: {
index: {
// page 的入口










