vue cli3 多頁應用

多頁的實作方式其實就是複制N套index.html、 App.vue、 main.js、 router.js、如圖index目錄下的檔案是vue cli3項目初始化後的基礎檔案，我們隻是将其移動到了index檔案夾下，subpageone  和 subpagetwo的結構與index目錄的結構一般無二，真正的核心是vue.config.js的配置。

目錄結構如圖：

核心配置 vue.config.js代碼如下（參見官方文檔 https://cli.vuejs.org/zh/config/#filenamehashing）：

module.exports = {
    //部署應用包時的基本 URL(解決build之後檔案通路路徑錯誤的問題)
    publicPath: process.env.NODE_ENV === 'production'
        ? '/vuetest/'
        : '/',
        
    pages:{
        index:{
            // page 的入口
            entry: 'src/modules/index/main.js',
            // 模闆來源
            template: 'public/index.html',
            // 在 dist/index.html 的輸出
            filename: 'index.html',
            // 當使用 title 選項時，
            // template 中的 title 标簽需要時 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在這個頁面中包含的塊，預設情況下會包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors','chunk-common','index']
        },
        // 當使用隻有入口的字元串格式時，
        // 模闆會被推導為 `public/subpage.html`
        // 并且如果找不到的話，就回退到 `public/index.html`。
        // 輸出檔案名會被推導為 `subpage.html`。
        subpageone:'src/modules/subpageone/subpageone.js',
        subpagetwo:'src/modules/subpagetwo/subpagetwo.js'
    }
}
           

git demo位址：https://github.com/zeroyul/vuecli3-pages