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