一、簡(jiǎn)介

關(guān)于如何以及為什么要構(gòu)建多頁vue應(yīng)用，我們?cè)谏弦黄恼轮幸呀?jīng)介紹過，感興趣的請(qǐng)參考構(gòu)建多頁vue應(yīng)用。本文我們要介紹的是，對(duì)于一個(gè)多頁應(yīng)用，如何單獨(dú)打包其中一個(gè)（或幾個(gè)）頁面。

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

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

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

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

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

二、實(shí)現(xiàn)過程

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

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

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

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

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

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

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

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

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

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

2. 定義模式行為

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

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

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

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

NODE_ENV = 'production'
page = 'page1'

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

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

3. 定義打包邏輯

之前我們定義多頁應(yīng)用的配置時(shí)，pages字段配置的是固定的值，也就是定義了三個(gè)打包入口?，F(xiàn)在有了全局變量process.env.page，我們就不需要設(shè)為定值了，而是可以根據(jù)這個(gè)變量的值，動(dòng)態(tài)定義打包入口。此時(shí)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ù)返回的對(duì)象僅包括page1這一個(gè)頁面的入口，否則就返回三個(gè)打包入口，進(jìn)行完整多頁應(yīng)用的構(gòu)建。

基于這個(gè)原理，我們同樣可以定義page2、page3的打包模式，甚至定義更加復(fù)雜的打包模式（如同時(shí)打包page1和page2），此時(shí)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命令時(shí)，vue-cli會(huì)先讀取指定的page1模式對(duì)應(yīng)的.env.page1文件，它會(huì)為process.env新增環(huán)境變量page。然后vue-cli會(huì)去讀取vue.config.js配置文件中的pages字段，調(diào)用resolvePages函數(shù)，并傳入變量process.env.page，得到打包入口對(duì)象為：{ page1 }，由于只有一個(gè)打包入口，因此vue-cli會(huì)調(diào)用webpack的打包服務(wù)，對(duì)該頁面進(jìn)行單獨(dú)構(gòu)建。

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

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

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

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

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

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

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

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

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

VUE_APP_PROJECT = 'project1'

.env.project2

VUE_APP_PROJECT = 'project2'

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

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

methods: {
 doSomething(){
  if(process.env.VUE_APP_PROJECT === 'project1'){
   // 對(duì)project1項(xiàng)目添加額外的邏輯
   ...
  }
 }
}

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

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

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

總結(jié)

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

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

最新評(píng)論