一、簡介

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

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

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

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

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

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

二、實現(xiàn)過程

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

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

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

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

也就是說，這個命令實際上是在調(diào)用vue-cli-service服務(wù)的build命令。

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

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

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

我們希望，當(dāng)執(zhí)行npm run build-page1命令時，webpack就會自動把page1打包出來。

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

2. 定義模式行為

啟用一個打包模式的本質(zhì)含義，其實是啟用一組特定的環(huán)境變量。

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

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

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

NODE_ENV = ’production’page = ’page1’

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

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

3. 定義打包邏輯

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

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),}

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

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

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

現(xiàn)在一切準(zhǔn)備就緒。

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

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

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

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

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

三、打包模式的應(yīng)用

打包模式的應(yīng)用不僅在于單頁打包，我們舉一個更常見的例子：假設(shè)我們的代碼打包后可能被派發(fā)到多個項目上，而這些項目之間卻存在一些細(xì)小的差別（比如某個表格的樣式不同）。如果我們?yōu)槊總€項目都單獨創(chuàng)建一份代碼，那么代碼庫將變得極難維護(hù)。這時候，打包模式就可以派上用場了。

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

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

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

VUE_APP_PROJECT = ’project1’

.env.project2

VUE_APP_PROJECT = ’project2’

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

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

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

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

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

你可以運行npm run serve-project1來啟用project1環(huán)境。

總結(jié)

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

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