在項目開發(fā)中，如果需求將同一套代碼部署到多臺服務器上，并且代碼上的區(qū)別只改變后端url指向地址。

如何做這個時候需要思考有哪些解決方案：

一、初版配置

最開始按照最簡單的思維方式，針對每一個后端地址進行單獨打一個包，這個做法確實能解決問題，但是如果需要更新代碼，那么針對每個環(huán)境每次都需要重新的打包再上傳代碼的動作，其實是比較耗時且不友好，如果更新上線后發(fā)現(xiàn)地址寫錯了那么就需要再次打包上傳。

1、代碼案例

1、首先看下vue環(huán)境配置是做的，一般在根節(jié)點目錄下新建文件：.env.development（開發(fā)環(huán)境）、.env.production文件（生產(chǎn)環(huán)境） 在.env.development（開發(fā)環(huán)境）文件下寫入

NODE_ENV='development'
//  var ACTION_PATH = "http://192.168.0.121/ysapi";
// var ACTION_PATH = "http://192.168.0.121/onestopapi";
  var ACTION_PATH = "http://192.168.0.72:55559";//

在.env.production（生產(chǎn)環(huán)境）文件下寫入

NODE_ENV='production'
ACTION_PATH = "http://192.168.7.107:8080";//
//ACTION_PATH = "http://192.168.0.72:8300";
//ACTION_PATH = "http://192.168.0.72:55559";

使用調(diào)用該變量的時候，通過process.env.的方式使用，例如下面我要封裝axios請求的時候：

var api = axios.create({
    baseURL:process.env.ACTION_PATH,//請求后端地址
    timeout: 7000,//請求超時
    withCredentials: true, // 是否發(fā)送 cookie
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
});

2、代碼解釋

process.env對象是Node.js提供的一個全局對象，用于訪問當前Node.js進程的環(huán)境變量。在Vue項目中，我們可以通過這個對象來獲取在啟動項目時設置的環(huán)境變量。

在Vue項目中，我們通常會有一些配置是根據(jù)不同的環(huán)境來改變的，比如API的地址，在開發(fā)環(huán)境中我們可能會用到本地的API，在生產(chǎn)環(huán)境中則需要用到線上的API。

這時我們可以通過設置環(huán)境變量的方式來實現(xiàn)這種需求。在Vue項目中，我們可以在項目根目錄下創(chuàng)建一個.env文件，然后在這個文件中設置環(huán)境變量

自此最簡單的將一套代碼部署在不同服務器的方案就處理了，那就是每次都去改變ACTION_PATH值然后再重新打包部署更新上線。

二、優(yōu)化配置

過一段時間，覺得剛才的那種方式太過痛苦，每次測試上線需要改變兩個文件的url，有可能用錯了后端環(huán)境，并且兩個文件對應的開發(fā)環(huán)境url和生成環(huán)境url都是通過備注的方式來記錄可能會混亂，對這個環(huán)境配置做優(yōu)化。

這時看到下面一段文檔內(nèi)容：

在 Vue CLI 創(chuàng)建的項目中，process.env.NODE_ENV 的值會根據(jù)你運行的命令自動設置。例如，如果你運行 npm run serve（或 yarn serve），那么 process.env.NODE_ENV 的值會被設置為 "development"；如果你運行 npm run build（或 yarn build），那么 process.env.NODE_ENV 的值會被設置為 "production"。

1、代碼案例

思路設計一個配置文件，通過不同的變量管理不同的環(huán)境。利用Node.js設置的環(huán)境變量process.env.NODE_ENV確定當前處于哪種模式（開發(fā)模式、測試模式還是生產(chǎn)模式）。

在src/api文件中創(chuàng)建config.js文件，文件中寫

export default {
    baseUrl: {
            development: 'http://localhost:8081/muyouyu',// 開發(fā)環(huán)境
            production: 'http://localhost:8080/onestop',// 正式環(huán)境
    },
    newbaseUrl: {
            development:'http://192.168.0.72:55555',// 開發(fā)環(huán)境
            production: 'http://192.168.0.72:55559',// 正式環(huán)境
    },
      //更多配置  ...	
}

同樣以剛才封裝axios請求的案例：

import config from '@/api/config.js'
var api = axios.create({
    baseURL: config.baseUrl[process.env.NODE_ENV],//請求后端地址
    timeout: 7000,//請求超時
    withCredentials: true, // 是否發(fā)送 cookie
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
});

2、代碼解釋

上面的案例代碼分兩個模塊：

1、配置文件，它導出了一個對象，對象中有一個baseUrl屬性，這個屬性的值也是一個對象，包含了兩個屬性：development和production。這兩個屬性分別對應了開發(fā)環(huán)境和生產(chǎn)環(huán)境的baseUrl。

2、axios請求引用上述配置文件。config.baseUrl[process.env.NODE_ENV]這段代碼的意思是，根據(jù)當前的環(huán)境變量process.env.NODE_ENV的值（development或production）來獲取對應環(huán)境的baseUrl。

三、最終方案

隨著項目部署的環(huán)境越來越多，使用配置變量也越來越多，同時采用上面方案也沒有根本上解決最開始的那問題，自此想到了我上家公司的react開發(fā)的sass平臺，在public文件夾創(chuàng)建一個congfig.js文件，將配置參數(shù)都寫在這個（public文件打包編譯時不會修改文件內(nèi)容，會原封不動保留）；在此基礎上將congfig.js的配置項掛載到瀏覽器window對象，頁面上調(diào)用，通過window.appConfig的方式獲取url。

1、代碼案例

說干就干，根據(jù)剛才的思路寫案例demo

第一段代碼是在public文件夾創(chuàng)建一個congfig.js文件，在全局作用域內(nèi)定義一個名為window.appConfig的對象。該對象包含該應用的配置信息，例如應用名稱、版本、描述、圖標以及配置文件地址等信息。

window.appConfig = {
    // 應用名稱
    appName: 'vue-admin-beautiful',
    // 應用版本
    appVersion: '1.0.0',
    // 應用描述
    appDescription: 'vue-admin-beautiful',
    // 應用圖標
    appLogo: require('@/assets/logo.png'),
    // 應用圖標高清

    // 配置文件地址
    configBaseUrl:'https://apitest.xhsbds.com/'//動態(tài)環(huán)境
  }

第二段代碼是在主入口文件main.js中導入了上一段代碼中定義引用的config.js文件，即應用的配置信息。

import '../public/config.js'

第三段代碼是創(chuàng)造了一個新的 Axios 實例，然后設置了這個實例的請求攔截器。在每次實例發(fā)送請求之前，都會先進入請求攔截器。在請求攔截器中，將配置的 base URL 更新為全局配置的 configBaseUrl，也就是將請求的后端地址指向為用戶自定義的地址。

var api = axios.create({
    timeout: 7000,//請求超時
    withCredentials: true, // 是否發(fā)送 cookie
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
});


// 請求攔截器
api.interceptors.request.use(
    config => {
        config.baseURL = window.appConfig.configBaseUrl;//請求后端地址
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

2、代碼解釋

為什么這次的axios配置沒有放在create中聲明baseURL后端路徑呢？其實也可以，主要是為了方便調(diào)試，在控制臺更改請求地址后，頁面可以實時看到最新請求路徑效果?？偨Y來說，這三段代碼將用戶自定義的配置信息（包括后端地址）注入到所有的后端請求中配置更加靈活。

3、歸納總結

采用這種方式動態(tài)設置 base URL 的好處主要有以下幾點：

靈活性：將 base URL 抽離出來作為配置，可以隨時改變請求的服務器而不需要修改代碼，只需要修改配置文件即可。

統(tǒng)一管理：如果項目中有大量的后端請求，統(tǒng)一將 base URL 作為配置進行管理，可以避免在每個請求的 URL 中都包含相同的 base URL。

環(huán)境切換方便：在開發(fā)過程中，常與多個服務器系統(tǒng)進行交互，如測試環(huán)境、預發(fā)環(huán)境、生產(chǎn)環(huán)境等不同環(huán)境下的服務器。將 base URL 設置在配置文件中，可以快速在這些環(huán)境間切換。

便于維護：項目迭代過程中，如果服務端的URL地址或者端口有變化，只需要去修改配置文件就可以了，無需搜索整個項目的網(wǎng)絡請求去修改，節(jié)約時間并且易于維護。

到此這篇關于Vue實現(xiàn)項目通用配置環(huán)境管理詳解的文章就介紹到這了,更多相關Vue配置環(huán)境管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論