前言
首先我們可以把多頁應用理解為由多個單頁構成的應用，而何謂多個單頁呢？其實你可以把一個單頁看成是一個 html 文件，那么多個單頁便是多個 html 文件，多頁應用便是由多個 html 組成的應用，如下圖所示
既然多頁應用擁有多個 html ，那么同樣其應該擁有多個獨立的入口文件、組件、路由、 vuex 等。沒錯，說簡單一點就是多頁應用的每個單頁都可以擁有單頁應用 src 目錄下的文件及功能，我們來看一下一個基礎多頁應用的目錄結構
├── node_modules # 項目依賴包目錄
├── build # 項目 webpack 功能目錄
├── config # 項目配置項文件夾
├── src # 前端資源目錄
│ ├── images # 圖片目錄
│ ├── components # 公共組件目錄
│ ├── pages # 頁面目錄
│ │ ├── page1 # page1 目錄
│ │ │ ├── components # page1 組件目錄
│ │ │ ├── router # page1 路由目錄
│ │ │ ├── views # page1 頁面目錄
│ │ │ ├── page1.html # page1 html 模板
│ │ │ ├── page1.vue # page1 vue 配置文件
│ │ │ └── page1.js # page1 入口文件
│ │ ├── page2 # page2 目錄
│ │ └── index # index 目錄
│ ├── common # 公共方法目錄
│ └── store # 狀態管理 store 目錄
├── .gitignore # git 忽略文件
├── .env # 全局環境配置文件
├── .env.dev # 開發環境配置文件
├── .postcssrc.js # postcss 配置文件
├── babel.config.js # babel 配置文件
├── package.json # 包管理文件
├── vue.config.js # CLI 配置文件
└── yarn.lock # yarn 依賴信息文件
二、多入口
在單頁應用中，我們的入口文件只有一個， CLI 默認配置的是 main.js ，但是到了多頁應用，我們的入口文件便包含了 page1.js 、 page2.js 、 index.js 等，數量取決于 pages 文件夾下目錄的個數，這時候為了項目的可拓展性，我們需要自動計算入口文件的數量并解析路徑配置到 webpack 中的 entry 屬性上，如：
module.exports = { ... entry: { page1: '/xxx/pages/page1/page1.js', page2: '/xxx/pages/page2/page2.js', index: '/xxx/pages/index/index.js', }, ...}那么我們如何讀取并解析這樣的路徑呢，這里就需要使用工具和函數來解決了。我們可以在根目錄新建 build 文件夾存放 utils.js 這樣共用的 webpack 功能性文件，并加入多入口讀取解析方法
/* utils.js */const path = require('path');// glob 是 webpack 安裝時依賴的一個第三方模塊，該模塊允許你使用 * 等符號,// 例如 lib/*.js 就是獲取 lib 文件夾下的所有 js 后綴名的文件const glob = require('glob');// 取得相應的頁面路徑，因為之前的配置，所以是 src 文件夾下的 pages 文件夾const PAGE_PATH = path.resolve(__dirname, '../src/pages');/* * 多入口配置* 通過 glob 模塊讀取 pages 文件夾下的所有對應文件夾下的 js * 后綴文件，如果該文件存在* 那么就作為入口處理*/exports.getEntries = () => { let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') // 同步讀取所有入口文件 let map = {} // 遍歷所有入口文件 entryFiles.forEach(filePath => { // 獲取文件名 let filename = filePath.substring(filePath.lastIndexOf('//') + 1, filePath.lastIndexOf('.')) // 以鍵值對的形式存儲 map[filename] = filePath }) return map}
讀取并存儲完畢后，我們得到了一個入口文件的對象集合，這個對象我們便可以將其設置到 webpack 的 entry 屬性上，這里我們需要修改 vue.config.js 的配置來間接修改 webpack 的值
/* vue.config.js */const utils = require('./build/utils')module.exports = { ... configureWebpack: config => { config.entry = utils.getEntries() }, ...}這樣我們多入口的設置便完成了，當然這并不是 CLI 所希望的操作，后面我們會進行改進。
三、多模板
相對于多入口來說，多模板的配置也是大同小異，這里所說的模板便是每個 page 下的 html 模板文件，而模板文件的作用主要用于 webpack 中 html-webpack-plugin 插件的配置，其會根據模板文件生產一個編譯后的 html 文件并自動加入攜帶 hash 的腳本和樣式，基本配置如下
/* webpack 配置文件 */const HtmlWebpackPlugin = require('html-webpack-plugin') // 安裝并引用插件module.exports = { ... plugins: [ new HtmlWebpackPlugin({ title: 'My Page', // 生成 html 中的 title filename: 'demo.html', // 生成 html 的文件名 template: 'xxx/xxx/demo.html', // 模板路徑 chunks: ['manifest', 'vendor', 'demo'], // 所要包含的模塊 inject: true, // 是否注入資源 }) ] ...}以上是單模板的配置，那么如果是多模板只要繼續往 plugins 數組中添加 HtmlWebpackPlugin 即可，但是為了和多入口一樣能夠靈活的獲取 pages 目錄下所有模板文件并進行配置，我們可以在 utils.js 中添加多模板的讀取解析方法
/* utils.js */// 多頁面輸出配置// 與上面的多頁面入口配置相同，讀取 page 文件夾下的對應的 html 后綴文件，然后放入數組中exports.htmlPlugin = configs => { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach(filePath => { let filename = filePath.substring(filePath.lastIndexOf('//') + 1, filePath.lastIndexOf('.')) let conf = { template: filePath, // 模板路徑 filename: filename + '.html', // 生成 html 的文件名 chunks: ['manifest', 'vendor', filename], inject: true, } // 如果有自定義配置可以進行 merge if (configs) { conf = merge(conf, configs) } // 針對生產環境配置 if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, // 刪除 html 中的注釋代碼 collapseWhitespace: true, // 刪除 html 中的空白符 // removeAttributeQuotes: true // 刪除 html 元素中屬性的引號 }, chunksSortMode: 'manual' // 按 manual 的順序引入 }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr}
/* vue.config.js */const utils = require('./build/utils')module.exports = { ... configureWebpack: config => { config.entry = utils.getEntries() // 直接覆蓋 entry 配置 // 使用 return 一個對象會通過 webpack-merge 進行合并，plugins 不會置空 return { plugins: [...utils.htmlPlugin()] } }, ...}如此我們多頁應用的多入口和多模板的配置就完成了，這時候我們運行命令 yarn build 后你會發現 dist 目錄下生成了 3 個 html 文件，分別是 index.html 、 page1.html 和 page2.html
四、使用 pages 配置
其實，在 vue.config.js 中，我們還有一個配置沒有使用，便是 pages 。 pages 對象允許我們為應用配置多個入口及模板，這就為我們的多頁應用提供了開放的配置入口。官方示例代碼如下
/* vue.config.js */module.exports = { pages: { index: { // page 的入口 entry: 'src/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`。 subpage: 'src/subpage/main.js' }}我們不難發現， pages 對象中的 key 就是入口的別名，而其 value 對象其實是入口 entry 和模板屬性的合并，這樣我們上述介紹的獲取多入口和多模板的方法就可以合并成一個函數來進行多頁的處理，合并后的 setPages 方法如下
// pages 多入口配置exports.setPages = configs => { let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') let map = {} entryFiles.forEach(filePath => { let filename = filePath.substring(filePath.lastIndexOf('//') + 1, filePath.lastIndexOf('.')) let tmp = filePath.substring(0, filePath.lastIndexOf('//')) let conf = { // page 的入口 entry: filePath, // 模板來源 template: tmp + '.html', // 在 dist/index.html 的輸出 filename: filename + '.html', // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本 chunks: ['manifest', 'vendor', filename], inject: true, }; if (configs) { conf = merge(conf, configs) } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, // 刪除 html 中的注釋代碼 collapseWhitespace: true, // 刪除 html 中的空白符 // removeAttributeQuotes: true // 刪除 html 元素中屬性的引號 }, chunksSortMode: 'manual'// 按 manual 的順序引入 }) } map[filename] = conf }) return map}上述代碼我們 return 出的 map 對象就是 pages 所需要的配置項結構，我們只需在 vue.config.js 中引用即可
/* vue.config.js */const utils = require('./build/utils')module.exports = { ... pages: utils.setPages(), ...}這樣我們多頁應用基于 pages 配置的改進就大功告成了，當你運行打包命令來查看輸出結果的時候，你會發現和之前的方式相比并沒有什么變化，這就說明這兩種方式都適用于多頁的構建，但是這里還是推薦大家使用更便捷的 pages 配置
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
