本文提要：
使用vuecli3創(chuàng)建的項(xiàng)目默認(rèn)都是單頁面應(yīng)用，但項(xiàng)目給開發(fā)人員暴露了配置多頁面的方法：在vue.config.js中配置pages對(duì)象，本文將另外配置兩個(gè)入口，并簡單說一下多頁面項(xiàng)目的目錄規(guī)劃，如果可以幫到大家，是鄙人的榮幸。

1、vue.config.js配置：
在項(xiàng)目根目錄下新建vue.config.js，并進(jìn)行如下配置：

module.exports = {
    pages: {
        //配置展開寫法
        pagetwo: {
            // 必需項(xiàng):應(yīng)用入口配置，相當(dāng)于單頁面應(yīng)用的main.js
            entry: 'src/modules/pagetwo/main.js',
            //可選項(xiàng)： 應(yīng)用的html模版，相當(dāng)于單頁面應(yīng)用的public/index.html，，省略時(shí)默認(rèn)與模塊名一致
            template: 'public/pagetwo.html',
            // 編譯后在dist目錄的輸出文件名，可選項(xiàng)，省略時(shí)默認(rèn)與模塊名一致
            filename: 'pagetwo.html',
            // 可選項(xiàng)，html中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'pagetwo page',
            //可選項(xiàng)，需要引入的打包后的塊
            chunks: ['chunk-vendors','pagetwo']
        },
        // 配置簡寫：直接用字符串表示模塊入口，其他采用默認(rèn)
        pagethree: 'src/modules/pagethree/main.js'
    }
}

這里我使用了兩種方式，配置了兩個(gè)頁面，大家可以參考一下
解釋一下chunks的配置：chunk-vendors指的是項(xiàng)目打包后抽離的公共庫，pagetwo指的是我們的當(dāng)前頁面打包后的業(yè)務(wù)塊，運(yùn)行npm run build，在dist中可以看到，這塊不明白的可以了解一下webpack的dllPlugin插件https://www.webpackjs.com/plugins/dll-plugin/，或者干脆使用第二種簡寫配置，vuecli會(huì)幫助我們自動(dòng)引入

捕獲.PNG

2、新增html文件
由于我創(chuàng)建了pagetwo和pagethree兩個(gè)頁面，所以需要在public下新建兩個(gè)html

捕獲.PNG

3、新增入口并規(guī)劃項(xiàng)目結(jié)構(gòu)

捕獲.PNG

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 多頁面項(xiàng)目中，各頁面使用到的vue組件都方法src/components下，并按頁面拆分文件夾，可以將src/components當(dāng)做項(xiàng)目的公用組件目錄

運(yùn)行效果：

捕獲.PNG

注意：
多頁面配置后，默認(rèn)的index.html將無法正常訪問，我們有兩種選擇：
1.可以刪掉src下的main.js、vue.js以及public中的index.html
2.在pages中配置index頁面

如果還沒明白，可以下載項(xiàng)目看看，git地址：https://github.com/iceCream001/vueoa.git