關于多頁vue應用的單頁面打包方法

這篇文章將為大家詳細講解有關關于多頁vue應用的單頁面打包方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、簡介

關于如何以及為什么要構建多頁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應用的單頁面打包方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。