vue 配置多頁面應用

前言: 本文基于​<code>​vue 2.5.2​</code>​, ​<code>​webpack 3.6.0​</code>​（配置多頁面原理類似，實作方法各有千秋，可根據需要進行定制化）

​<code>​vue​</code>​ 是單頁面應用。但是在做大型項目時，單頁面往往無法滿足我們的需求，是以需要配置多頁面應用。

​​Vue多頁面應用開發​​

​<code>​glob​</code>​ 子產品用于查找符合要求的檔案

其中，​<code>​pages​</code>​檔案夾用于放置頁面。 ​<code>​page1​</code>​ 和 ​<code>​page2​</code>​用于分别放置不同頁面，且預設均包含三個文檔: ​<code>​App.vue​</code>​, ​<code>​index.html​</code>​, ​<code>​index.js​</code>​, 這樣在多人協作時，可以更為清晰地明确每個檔案的含義。除此之外，此檔案也可配置路由。

其中：​<code>​PAGE_PATH​</code>​ 為所有頁面所在的檔案夾路徑，指向 ​<code>​pages​</code>​檔案夾。

該方法用于生成多頁面的入口對象，例如本例，獲得的入口對象如下：

其中：​<code>​key​</code>​ 為目前頁面的檔案夾名稱， ​<code>​value​</code>​ 為目前頁面的入口檔案名稱

在 ​<code>​devWebpackConfig​</code>​ 中的 ​<code>​plugins​</code>​數組後面拼接上上面新寫的​<code>​htmlPlugin​</code>​:

并删除下述代碼:

做 ​<code>​webpack.dev.conf.js​</code>​ 中的類似處理:

在項目檔案下建立​<code>​shell​</code>​腳本​<code>​generatePage.sh​</code>​, 并在腳本中寫入下述代碼：

之後在項目路徑下輸入下述指令:

即可在​<code>​pages​</code>​檔案夾下生成一個名為​<code>​page4​</code>​的新頁面。還可以通過自定義​<code>​shell​</code>​腳本的内容寫入路由等，以實作定制需求。