TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 3、《配置服務》

1、前言

在實際業務開發中，會遇到這樣一種需求，使用VUE的頁面須要支持SEO，同時對首屏有指標性要求，目前市面上廣泛使用的是Nuxt.js解決方案，在引入的同時還須要考慮與現有的全棧工程結合，本系列文章探討的是此類全棧工程的解決方案，同時使用的是TypeScript應用於先後端編程，文章中介紹的工程與技術要點源碼已上傳至Github，有須要的朋友可自行下載：
Nuxt.js和Nest.js同構工程

複製代碼

文章意在拋磚引玉，先後端使用同一種語言TypeScript編寫，示例已包含基本接口請求，數據庫鏈接應用，公用模塊封裝等實際開發中使用到的內容。

效果預覽:

如下爲該系列文章入口列表:
TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 1、《簡介》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 3、《配置服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 4、《UI系統》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 5、《API服務設計》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 6、《SEO功能實現》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 10、《工程化部署》

2、先後端共用一份配置

同構化工程常常會遇到一種問題：即先後端配置須要維護2份或者配置重複問題，在本示例工程中，將創建配置服務，從框架剝離的角度，讓先後端使用同一份配置。

這裏指的框架剝離：指的是配置服務不能導入任何先後端框架類或接口，這樣作的目的是避免先後端在調用時遇到各自運行環境不支持的類，好比：服務端支持mongoose但前端不支持運行。因此服務配置必須是純淨的，純TypeScript文件，與框架無關。

3、配置文件設計

基本實現原理爲：創建中間服務-配置服務，而且是單例形式，確保全部獲取對象同一份配置，服務中加入環境區分，同時加入AXIOS快捷方式，方便調用，前端（ Nuxt.js）後端(Nest.js)引用同一服務，經過環境區分獲取對應的環境，環境區分以啓動時傳入 NODE_ENV=xx進行爲準。

4、配置服務實現

• 配置服務

  

  在單例創建的構造體中首先讀入環境配置變量，依據環境配置變量決定惟一配置內容爲當前標記的哪一個環境，依據標記分別實例化不一樣的環境配置。

• 配置基類

  

  配置基類中定義各個環境共同的配置，差別化配置則由各環境子類自已實現，例如：

  

• 環境標記寫入
  前面提到，配置服務在實例化前先讀入了環境配置標記，該環境配置標記應在服務器啓動以前完成，在這裏封裝到單獨JS文件中，而且在啓動前經過命令行方式寫入，確保先後端讀取的是同一份配置。

  

  

  
  

5、前端調用方式

• 導入配置服務
• 從配置服務中直接調用方法獲取配置
  

5、服務端調用方式

• 與前端同樣，一樣是導入配置服務
• 從配置服務中直接調用方法獲取配置

至此，完成先後端調用同一份配置內容。