一. 需求分析
为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口
html文件需要定制命名，且脚本和样式文件需要放在指定的路径下，公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑（比如下面结构中应用
jquery.min.js的路径可能是
{{publicRoot}}/{{publicLib}}/jquery.minjs）。假设原工程中拥有AB这2个旧页面，现在需要开发CDE这3个页面，目录结构要求如下：
蓝色部分为旧资源，绿色部分为新开发需求。
二. 原方案分析
原方案采用
Vue+ElementUI进行开发，构建过程基本是零配置的，开发效率非常高，页面风格也统一，但零配置的构建过程只能生成
SPA模式的应用，所以原方案的做法是：将构建过程中需要定制的量提取到
config.js文件中进行统一管理，大致形式如下：
//config.js
module.exports = {
A:{
publicPath:'{{publicRoot}}/{{publicLib}}'
prodFileName:'A.html',
entryKey:'public/A',
entryPath:'public/A/A.js'
},
B:{
//...
}
//...
}开发过程中使用统一的路由文件
router.js，打包过程中在
main.js中引用对应页面的
XX.router.spa.js作为路由，而将其他页面注释掉，打包时传入命令行参数
--key=XXX,
key值在打包脚本中被解析后从
config.js中取出打包需要的设置参数，然后将目标页面打包为独立页面，其他页面虽然也在工程中，但并不参与打包。
// 入口文件src/main.js
import router from './pages/C/router.spa';
//import router from './pages/D/router.spa';
//import router from './pages/E/router.spa';上述打包过程在使用中出现了很多问题：
公共依赖没有剥离，
vue和
ElementUI会被打包进每一个单页面，使得每个打包出的
index.js几乎有1.2MB大小，这种空间浪费是没必要的。
