了解了Vue一般都會去用Vue-cli入門，這是一個構(gòu)建SPA的腳手架，查看其build的項目，可以看到它是將所有的模塊都輸出到一個build.js中，有時候會看到這個js文件特別大松忍，有好幾兆，然而當一個項目足夠復雜時筷厘，SPA恐怕不再適合使用了鸣峭，用戶不可能訪問你的網(wǎng)頁的時候一下子下載一個幾兆的文件，特別對于手機用戶酥艳，可能用戶只看了網(wǎng)站中的一篇文章摊溶，這也會導致網(wǎng)頁加載慢，這是不可取的充石。所以應(yīng)該將網(wǎng)站劃分成若干模塊莫换。于是就有了本demo（一個用于構(gòu)建多頁面的腳手架）
如何開始？
假設(shè)你已經(jīng)熟悉了vue-cli了??
-
創(chuàng)建項目
vue init webpack vue-multi-page # 為了簡便可以不用jslint等 -
開始改造
最主要的一步骤铃，將webpack進行改造以滿足對多頁面需求的支持拉岁，其實多頁面，即是webpack有多個入口惰爬。在此步中喊暖，我們主要的操作的對象是 build文件夾下的js文件。
-
首先撕瞧，我們對 utils.js進行改造
添加一個方法：getEntries陵叽，方法中需要使用到node的globa模塊，所以需要引入// glob模塊风范，用于讀取webpack入口目錄文件
-
var glob = require('glob');
```javascript
exports.getEntries = function (globPath) {
var entries = {}
/**
* 讀取src目錄,并進行路徑裁剪
*/
glob.sync(globPath).forEach(function (entry) {
/**
* path.basename 提取出用 ‘/' 隔開的path的最后一部分，除第一個參數(shù)外其余是需要過濾的字符串
* path.extname 獲取文件后綴
*/
var basename = path.basename(entry, path.extname(entry), 'router.js') // 過濾router.js
// ***************begin***************
// 當然沪么， 你也可以加上模塊名稱, 即輸出如下： { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' }
// 最終編譯輸出的文件也在module目錄下硼婿， 訪問路徑需要時 localhost:8080/module/index.html
// slice 從已有的數(shù)組中返回選定的元素, -3 倒序選擇，即選擇最后三個
// var tmp = entry.split('/').splice(-3)
// var pathname = tmp.splice(0, 1) + '/' + basename; // splice(0, 1)取tmp數(shù)組中第一個元素
// console.log(pathname)
// entries[pathname] = entry
// ***************end***************
entries[basename] = entry
});
// console.log(entries);
// 獲取的主入口如下： { main: './src/module/index/main.js', test: './src/module/test/test.js' }
return entries;
}
```
+ 其次禽车，對webpack.base.conf.js進行改造
刪除 ~~entry: {app: './src/main.js'},~~寇漫，取而代之如下：
```javascript
module.exports = {
···
entry: utils.getEntries('./src/module/**/*.js'),
```
+ 最后改造webpack.dev.conf.js和webpack.prod.conf.js
移除原來的HtmlWebpackPlugin
```javascript
var pages = utils.getEntries('./src/module/**/*.html')
for(var page in pages) {
// 配置生成的html文件，定義路徑等
var conf = {
filename: page + '.html',
template: pages[page], //模板路徑
inject: true,
// excludeChunks 允許跳過某些chunks, 而chunks告訴插件要引用entry里面的哪幾個入口
// 如何更好的理解這塊呢殉摔？舉個例子：比如本demo中包含兩個模塊（index和about）州胳，最好的當然是各個模塊引入自己所需的js，
// 而不是每個頁面都引入所有的js逸月，你可以把下面這個excludeChunks去掉栓撞，然后npm run build，然后看編譯出來的index.html和about.html就知道了
// filter：將數(shù)據(jù)過濾，然后返回符合要求的數(shù)據(jù)瓤湘，Object.keys是獲取JSON對象中的每個key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
})
}
// 需要生成幾個html文件瓢颅，就配置幾個HtmlWebpackPlugin對象
module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}
```
## 構(gòu)建步驟
``` bash
# 安裝依賴
npm install
# 本地測試
npm run dev
# 打包
npm run build
```
在本地調(diào)試啟動后訪問：[index](http://localhost:8080) | [about](http://localhost:8080/about.html) 即可
## 源碼
[我的github](https://github.com/jarvan4dev/vue-multi-page)