一、簡介

關于如何以及為什么要構建多頁vue應用，我們在上一篇文章中已經介紹過，感興趣的請參考構建多頁vue應用。本文我們要介紹的是，對于一個多頁應用，如何單獨打包其中一個（或幾個）頁面。

一般來說，多頁應用不需要打包單個頁面，這多個頁面可以作為整個應用直接放在靜態資源服務器上。不過我們也說過，多頁應用的每個頁面也可能會放在不同的服務器上，這時候如果往每個服務器上都放置完整的資源包，就會顯得過于臃腫。于是我們可能就需要將某個頁面單獨打包出來。

誠然，有一個很明顯的方法，就是在每次打包的時候直接刪掉vue.config.js的pages字段里不相關的頁面，如：

module.exports = { pages: { page1: {...}, // page2: {...}, // page3: {...} }}

顯然，這樣打包出來的結果就是只有page1頁面了。

但是每次打包都刪改配置文件并不是一種很優雅的做法。我們需要的方案是有多個打包命令，執行對應的打包命令即可打包對應的頁面，這樣我們就可以不再改配置文件了。下面我們來介紹這種方法：

二、實現過程

要實現通過不同的打包命令來打包單獨的頁面，需要先從打包命令本身說起。

1. 配置打包指令(指定打包模式)

我們執行的打包命令為npm run build，這個命令執行的是package.json的scripts字段下的build命令，它的原始值如下：

{ ... 'scripts': { ... 'build': 'vue-cli-service build' } ...}

也就是說，這個命令實際上是在調用vue-cli-service服務的build命令。

根據vue-cli的文檔介紹，build命令后面可以跟一個mode參數，定義打包模式，默認的打包模式包括production、development和test三個，它們的行為主要是把全局的process.env.NODE_ENV變量置為對應的值（即production、development和test）。在省略mode參數的情況下，默認值是production，即生產模式。

除了這三個默認模式外，我們還可以自定義打包模式。假如我們想定義一個專門打包page1的打包模式，就可以這樣一個指令：

'scripts': { 'build-page1': 'vue-cli-service build --mode page1' }

我們希望，當執行npm run build-page1命令時，webpack就會自動把page1打包出來。

但顯然只修改這里是不夠的，webpack并不知道page1是什么模式，以及它應該有哪些行為。接下來我們需要為page1這個打包模式定義行為。

2. 定義模式行為

啟用一個打包模式的本質含義，其實是啟用一組特定的環境變量。

比如，production模式會把process.env.NODE_ENV的值置為production，而process.env是webpack所在的node環境提供的全局變量。這樣，在代碼中，只需要根據process.env.NODE_ENV的值就可以判斷當前處于哪種打包模式了，代碼可以根據不同的打包模式產生不同的行為。

對于自定義的打包模式，我們也可以指定一組全局變量，以使代碼產生不同的行為。vue-cli文檔規定，每個自定義模式對應的變量應該定義在根目錄下的.env.xxx文件內。比如我們的打包模式名為page1，那么就需要在項目根目錄下新建一個.env.page1（注意，這里是沒有后綴的）文件：

當指定打包模式為page1時，webpack就會啟用這個文件中所定義的變量。文件內可以這樣定義變量：.env.page1

NODE_ENV = ’production’page = ’page1’

現在，當使用打包模式page1時，webpack就會讀取這個環境文件，然后把這里定義的變量逐個添加到全局對象process.env上。因此此時process.env.page的值就是字符串’page1’（NODE_ENV的值默認就是production，這里可以省略）。

向全局變量注冊了變量page之后，我們就可以在程序中根據它定義打包行為了。

3. 定義打包邏輯

之前我們定義多頁應用的配置時，pages字段配置的是固定的值，也就是定義了三個打包入口。現在有了全局變量process.env.page，我們就不需要設為定值了，而是可以根據這個變量的值，動態定義打包入口。此時vue.config.js可以進行如下改造：

function resolvePages(page){ let page1 = { entry: ’src/pages/page1/main.js’, template: ’public/index.html’, filename: ’page1.html’, }; let page2 = { entry: ’src/pages/page2/main.js’, template: ’public/index.html’, filename: ’page2.html’, }; let page3 = { entry: ’src/pages/page3/main.js’, template: ’public/index.html’, filename: ’page3.html’, }; return page === ’page1’ ? { page1 } : { page1, page2, page3 };}module.exports = { pages: resolvePages(process.env.page),}

我們現在讀取process.env.page的值進行判斷，如果它的值是page1，那么說明我們處于page1打包模式下，于是resolvePages函數返回的對象僅包括page1這一個頁面的入口，否則就返回三個打包入口，進行完整多頁應用的構建。

基于這個原理，我們同樣可以定義page2、page3的打包模式，甚至定義更加復雜的打包模式（如同時打包page1和page2），此時resolvePages函數的返回值只是稍微復雜一些：

return page === ’page1’ ? { page1 } : page === ’page2’ ? { page2 } : page === ’page1,page2’ ? { page1, page2 } : ... { page1, page2, page3 };

現在一切準備就緒。

我們執行npm run build-page1命令時，vue-cli會先讀取指定的page1模式對應的.env.page1文件，它會為process.env新增環境變量page。然后vue-cli會去讀取vue.config.js配置文件中的pages字段，調用resolvePages函數，并傳入變量process.env.page，得到打包入口對象為：{ page1 }，由于只有一個打包入口，因此vue-cli會調用webpack的打包服務，對該頁面進行單獨構建。

有人可能會問，難道只有打包時才能指定mode嗎？其實不是的，serve命令也有mode參數。根據以上過程，你也可以單獨啟動某一個頁面，此時你只需要定義下面這樣的腳本：

{ ... 'scripts': { 'serve-page1': 'vue-cli-service serve --mode page1' }}

與打包過程沒有什么差別，這里就不再贅述了。

需要注意的是，public文件夾下的資源是靜態資源，無論使用任何打包模式，它們都會被直接拷貝到dist文件夾下。

三、打包模式的應用

打包模式的應用不僅在于單頁打包，我們舉一個更常見的例子：假設我們的代碼打包后可能被派發到多個項目上，而這些項目之間卻存在一些細小的差別（比如某個表格的樣式不同）。如果我們為每個項目都單獨創建一份代碼，那么代碼庫將變得極難維護。這時候，打包模式就可以派上用場了。

我們可以為這些項目分別創建單獨的打包命令，如：

{ 'scripts': { 'build-project1': 'vue-cli-service build --mode project1', 'build-project2': 'vue-cli-service build --mode project2', }}

然后在根目錄下分別為每個打包模式定義一個環境文件：.env.project1，.env.project2。我們在這里分別定義一組全局變量：.env.project1

VUE_APP_PROJECT = ’project1’

.env.project2

VUE_APP_PROJECT = ’project2’

這里需要強調的是，如果需要在src路徑下的代碼中引用env中的某個變量，那么這個變量必須以VUE_APP_開頭，否則結果都會是undefined（在src之外的代碼中沒有這個限制，如上面我們在vue.config.js中引用的變量就沒有遵循這個約束，當然你可以更規范地對所有自定義變量添加這個前綴，以防止出錯）。

現在，當執行npm run build-project1時，process.env.VUE_APP_PROJECT的值就是project1，我們可以在代碼中根據這個值來區分不同的項目。比如在某個組件中，我們需要對項目1添加一些額外的邏輯：

methods: { doSomething(){ if(process.env.VUE_APP_PROJECT === ’project1’){ // 對project1項目添加額外的邏輯 ... } }}

當你運行npm run build-project1打包命令時，if語句的內容就會生效，反之，在其他模式下，它不會生效。同樣的，你也可以配置項目1專屬的啟動命令：

'serve-project1': 'vue-cli-service serve --mode project1'

你可以運行npm run serve-project1來啟用project1環境。

總結

通過學習在多頁應用中打包單個頁面，我們學會了如何自定義打包模式，這應該是本文最重要的知識點。將打包模式推廣，我們學會了如何在一份代碼中添加多個項目的邏輯，這使得我們維護多個項目分支的成本大大降低。打包模式的用途可能還遠不止這些，希望讀者理解它，并熟練運用。

到此這篇關于多頁vue應用的單頁面打包方法(內含打包模式的應用)的文章就介紹到這了,更多相關多頁vue應用的單頁面打包內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！