详解vue-cli3多页应用改造

2020-06-14 06:28:46易采站长站整理

需求

一个平台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 的入口