本文提要：
使用vuecli3创建的项目默认都是单页面应用，但项目给开发人员暴露了配置多页面的方法：在vue.config.js中配置pages对象，本文将另外配置两个入口，并简单说一下多页面项目的目录规划，如果可以帮到大家，是鄙人的荣幸。
1、vue.config.js配置：
在项目根目录下新建vue.config.js，并进行如下配置：
module.exports = {
pages: {
//配置展开写法
pagetwo: {
// 必需项:应用入口配置，相当于单页面应用的main.js
entry: 'src/modules/pagetwo/main.js',
//可选项： 应用的html模版，相当于单页面应用的public/index.html，，省略时默认与模块名一致
template: 'public/pagetwo.html',
// 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
filename: 'pagetwo.html',
// 可选项，html中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'pagetwo page',
//可选项，需要引入的打包后的块
chunks: ['chunk-vendors','pagetwo']
},
// 配置简写：直接用字符串表示模块入口，其他采用默认
pagethree: 'src/modules/pagethree/main.js'
}
}
这里我使用了两种方式，配置了两个页面，大家可以参考一下
解释一下chunks的配置：chunk-vendors指的是项目打包后抽离的公共库，pagetwo指的是我们的当前页面打包后的业务块，运行npm run build，在dist中可以看到，这块不明白的可以了解一下webpack的dllPlugin插件https://www.webpackjs.com/plugins/dll-plugin/，或者干脆使用第二种简写配置，vuecli会帮助我们自动引入
2、新增html文件
由于我创建了pagetwo和pagethree两个页面，所以需要在public下新建两个html
3、新增入口并规划项目结构
main.js 是页面入口：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.use(require('vue-wechat-title'))
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue 是页面根组件：
<template>
<div id="App" v-wechat-title="$route.meta.title">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
route.js 是路由映射组件：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: ()=>import('./views/Home.vue'),
meta: { title: '首页' }}
]
export default new VueRouter({
routes: routes
})
views文件夹存放路由页面：Home.vue
<template>
<div>this is pagetwo home</div>
</template>
<script>
export default {
name: "home"
}
</script>
<style scoped>
</style>
components 多页面项目中，各页面使用到的vue组件都方法src/components下，并按页面拆分文件夹，可以将src/components当做项目的公用组件目录
运行效果：
注意：
多页面配置后，默认的index.html将无法正常访问，我们有两种选择：
1.可以删掉src下的main.js、vue.js以及public中的index.html
2.在pages中配置index页面
如果还没明白，可以下载项目看看，git地址：https://github.com/iceCream001/vueoa.git
