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

如何做這個(gè)時(shí)候需要思考有哪些解決方案：

一、初版配置

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

1、代碼案例

1、首先看下vue環(huán)境配置是做的，一般在根節(jié)點(diǎn)目錄下新建文件：.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)用該變量的時(shí)候，通過(guò)process.env.的方式使用，例如下面我要封裝axios請(qǐng)求的時(shí)候：

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

2、代碼解釋

process.env對(duì)象是Node.js提供的一個(gè)全局對(duì)象，用于訪問當(dāng)前Node.js進(jìn)程的環(huán)境變量。在Vue項(xiàng)目中，我們可以通過(guò)這個(gè)對(duì)象來(lái)獲取在啟動(dòng)項(xiàng)目時(shí)設(shè)置的環(huán)境變量。

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

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

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

二、優(yōu)化配置

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

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

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

1、代碼案例

思路設(shè)計(jì)一個(gè)配置文件，通過(guò)不同的變量管理不同的環(huán)境。利用Node.js設(shè)置的環(huán)境變量process.env.NODE_ENV確定當(dāng)前處于哪種模式（開發(fā)模式、測(cè)試模式還是生產(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請(qǐng)求的案例：

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

2、代碼解釋

上面的案例代碼分兩個(gè)模塊：

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

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

三、最終方案

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

1、代碼案例

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

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

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

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

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

import '../public/config.js'

第三段代碼是創(chuàng)造了一個(gè)新的 Axios 實(shí)例，然后設(shè)置了這個(gè)實(shí)例的請(qǐng)求攔截器。在每次實(shí)例發(fā)送請(qǐng)求之前，都會(huì)先進(jìn)入請(qǐng)求攔截器。在請(qǐng)求攔截器中，將配置的 base URL 更新為全局配置的 configBaseUrl，也就是將請(qǐng)求的后端地址指向?yàn)橛脩糇远x的地址。

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


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

2、代碼解釋

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

3、歸納總結(jié)

采用這種方式動(dòng)態(tài)設(shè)置 base URL 的好處主要有以下幾點(diǎn)：

靈活性：將 base URL 抽離出來(lái)作為配置，可以隨時(shí)改變請(qǐng)求的服務(wù)器而不需要修改代碼，只需要修改配置文件即可。

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

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

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

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

最新評(píng)論