公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置，随着需求的不断增加，发现有必要使用多页面配置。看了很多 vue多页面配置 的文章，基本都是在初始化时就配置了多页面。而且如果使用这些实现，需要调整当前项目的目录结构，这点也是不能接受的。
最后，参考这些文章，在不调整当前项目目录结构实现了多页面的配置的添加。这里做下记录、总结，方便以后复用。如果还能有幸帮助到有同样需求的童鞋的话，那就更好了。
实现步骤
1.添加新增入口相关文件;
2.使用变量维护多入口；
3.开发环境读取多入口配置；
4.生产环境读取多入口配置；
新增入口相关文件
在 src 目录下新增一个 page1 文件夹，新建新页面的所需的相关文件(入口文件、HTML模板文件等)。我这边直接 vue-cli 初始化创建相关文件复制了一份到 page1 文件夹下。如下：
├─App.vue
├─main.js
├─page1.html // 这里模板文件名称需要与文件夹名称相同，方便输出模板读取
├─router
| └index.js
├─components
| └HelloWorld.vue
├─assets
| └logo.png
page1/router/index.js 需要对该页面的所有路由添加同文件夹名的公共路径，用于解析：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/page1/components/HelloWorld' // 这里也需要留意
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/page1/',
redirect: '/page1/index'
},
{
path: '/page1/index',
name: 'HelloWorld',
component: HelloWorld
}
]})使用变量维护多入口
我们在项目目录下的 build/utils.js 的最后 exports 一个指定多入口的对象。如下：
// 这里，每个属性就是一个页面配置，指定该页面的入口文件
// 如果需要添加，只需多增加一个属性
// 属性名必和html模板文件名、目录名称相同
exports.multipleEntrys = {
page1: './src/page1/main.js'
}之所以使用 build/utils.js ，是因为该文件在
webpack.base.conf.js 、 webpack.prod.conf.js 、 webpack.dev.conf.js 都用导入。开发环境读取多入口配置
首先，在
build/webpack.base.conf.js 中，我们把上面定义的入口添加进 entry 配置：
entry: {
app: './src/main.js',
...utils.multipleEntrys // entry添加该行
}然后，在
build/webpack.dev.conf.js
