vue cli3同一個項目下的多頁應用建立

0x00、頁面效果：

 

 表面看相似路由切換，其實是兩個vue的實例，掛載在不一樣的根節點上。

 

0x0一、整體目錄結構：

 

 

 

 項目分爲三個模塊，也就是三個多頁應用，police、relatives、self。

0x0二、以self爲例，剖析self內部結構：

 

 　　1.self模塊的入口index.js，至關於單頁應用的main.js：

　　

import Vue from 'vue'
import App from './index.vue'
import router from './router'
// import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#self')

這就是self模塊的vue實例，該實例掛載在#self下。

　　2.self模塊的index.vue：

<template>
  <div id="self">
    take care by self
    <router-view/>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

     self模塊的頁面掛載在#self下。  

     3.router.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'login',
            component: () => import('./login')
        }
    ]
})

self模塊對應的路由，不詳細解釋。

0x0三、多頁頁面的配置：

const webpack = require('webpack')
module.exports = {
    pages: {
        takecarebypolice: {
            // 應用入口配置，至關於單頁面應用的main.js，必需項
            entry: 'src/modules/TakecareByPolice/index.js',
            // 應用的模版，至關於單頁面應用的public/index.html，可選項，省略時默認與模塊名一致
            template: 'public/takecarebypolice.html',
        },
        takecarebyrelatives: {
            // 應用入口配置，至關於單頁面應用的main.js，必需項
            entry: 'src/modules/TakecareByRelatives/index.js',
            // 應用的模版，至關於單頁面應用的public/index.html，可選項，省略時默認與模塊名一致
            template: 'public/takecarebyrelatives.html',
        },
        takecarebyself: {
            // 應用入口配置，至關於單頁面應用的main.js，必需項
            entry: 'src/modules/TakecareBySelf/index.js',
            // 應用的模版，至關於單頁面應用的public/index.html，可選項，省略時默認與模塊名一致
            template: 'public/takecarebyself.html',
        },
    }
}

entry：指定了模塊的入口

配置完成後，便可運行。

0x0四、打包後的效果：

 

ps:手動把原有的index.html這些刪除了。