共计 3702 个字符，预计需要花费 10 分钟才能阅读完成。
需求
一个平台 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 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。// 输出文件名会被推导为 `subpage.html`。subpage: 'src/subpage/main.js'
}
}Step1: 创建新项目
选择需要的 Babel、Router、Vuex、eslint…
具体步骤参考官网：创建一个项目
Step2: 修改配置文件 vue.config.js
在根目录下新建 public 文件夹，包含 favicon.ico 和 index.html 两个文件。
index 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>P- 公共服务平台 </title>
</head>
<body>
<noscript>
<strong>
We're sorry but page doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>然后，在根目录下新建 vue.config.js
const glob = require('glob')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
const PAGES_PATH = './src/pages/*/*.js'
module.exports = {pages: setPages(),
// TODO：以下内容非生成多页应用必须配置
lintOnSave: true,
productionSourceMap: false,
chainWebpack: config => {
/**
* 自动化导入文件
*/
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
/**
* 添加别名
*/
config.resolve.alias
.set('@index', resolve('src/pages/index'))
.set('@label', resolve('src/pages/label'))
.set('@metrics', resolve('src/pages/metric'))
.set('@service', resolve('src/pages/service'))
.set('@stocktake', resolve('src/pages/stocktake'))
/**
* 菜单 icon 处理为 svg-sprite
*/
config.module
.rule('svg')
.exclude
.add(resolve('src/assets/icons/menus'))
.end()
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/assets/icons/menus')) // 处理目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({symbolId: 'icon-[name]'
})
}
}
/**
* 组装页面
*/
function setPages () {let pages = {}
glob.sync(PAGES_PATH).forEach(filepath => {let fileList = filepath.split('/')
let fileName = fileList[fileList.length - 2]
pages[fileName] = {
entry: filepath,
template: 'public/index.html',
filename: `${fileName}.html`,
// title:
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
})
return pages
}
/**
* 注入公共 less
* @param rule
*/
function addStyleResource (rule) {rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, 'src/assets/styles/variable.less')
]
})
}Step3: 拷贝原项目 src 目录至 pages 下，大概长这样
Step4: 各产品原项目下 package.json 依赖包都挪到根目录下 package.json，重新安装
PS：由于依赖向上升级，某些老版本依赖包可能会存在升级引发的问题，需要细心走查一遍。这里由于业务不一样，就不详细赘述了
然后 npm start，完美启动～
正文完
