vuecli3配置多页面应用

本文提要：
使用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会帮助我们自动引入

捕获.PNG

2、新增html文件
由于我创建了pagetwo和pagethree两个页面，所以需要在public下新建两个html

捕获.PNG

3、新增入口并规划项目结构

捕获.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 多页面项目中，各页面使用到的vue组件都方法src/components下，并按页面拆分文件夹，可以将src/components当做项目的公用组件目录

运行效果：

捕获.PNG

注意：
多页面配置后，默认的index.html将无法正常访问，我们有两种选择：
1.可以删掉src下的main.js、vue.js以及public中的index.html
2.在pages中配置index页面

如果还没明白，可以下载项目看看，git地址：https://github.com/iceCream001/vueoa.git