有时候，你想开发很多个具备单页应用性质的页面，一个一个用Vue-cli构建并且分成不同的项目未免太蠢了。
这篇文章用于记录我在给VCenter 前端配置多页面的时候的解决方法。
网络上有很多类似的方法，一般都是讲讲增加Entry，增加HtmlWebpackPlugin的相关配置，每次新增或者删除页面的时候都需要做很多工作。
当然，也有一些文章，给了一些自动化解决方案，但是并不美观，也不方便，比如分页面划分文件夹之类的，然后通过webpack配置中的js自动引入这些文件夹，这种就比较倾向于是用文件夹作为约定。
在本文中，我结合了这两种方法，尝试通过一个配置文件来管理自己的多页面方案。
在Tampermonkey 提供的编辑器里面进行编码实在是太劳累了，于是找了找使用本地编辑器编写代码的方法，在这里做一下总结。
具体的步骤无需赘述了，index.html之中引入 CDN 的 script
<!-- axios -->
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<!-- Vue -->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<!-- VueRouter -->
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<!-- ElementUI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet"/>第二步在webpack里面配置externals:
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
"axios":"axios",
"ElementUI":"ELEMENT",
},最后从组件中删除 import xxx from vue之类的即可。
事实上不删也无所谓，webpack打包时自会略去这一部分(前提是与external中配置的名称一致)。