最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue項(xiàng)目多租戶環(huán)境變量的設(shè)置

 更新時(shí)間:2023年04月20日 09:16:45   作者:jerry_kong  
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題

在vue項(xiàng)目中,在 .env 文件內(nèi),以 VUE_APP*開頭的變量,可以在項(xiàng)目源碼中使用,在編譯階段由編譯器靜態(tài)替換為對應(yīng)值;假如項(xiàng)目依賴一個(gè)sso地址,生產(chǎn)環(huán)境是 sso.xxx.com ,測試環(huán)境是sso-test.xxx.com, 那么我們可以再 .env 文件 中 寫入 VUE_APP_API_SSO_URL=https://sso.xxx.com,在 .env.test 寫入 VUE_APP_API_SSO_URL=https://sso-test.xxx.com,這種將不同的環(huán)境寫入到 不同的配置文件方案,很好的適配了不同環(huán)境;

但是 如果 要部署給給個(gè)企業(yè)呢,每個(gè)企業(yè)地址都不同?我們今天討論如何解決;

策略

vue-cli在編譯vue項(xiàng)目,環(huán)境變量是寫入到.env文件中的,是我們提前準(zhǔn)備好的;僅應(yīng)用有某個(gè)企業(yè),因此我們是否可以 node.js 去操作去讀取 另外一份配置文件,將新內(nèi)容 寫入 .env 文件內(nèi)呢?

一句話,不同企業(yè)以及多套環(huán)境,寫到配置文件中,編譯前 動(dòng)態(tài)生成 .env 文件;

修改編譯命令

package.json 中增加 evn 命令行,生成新的 .env;

"scripts": {
    "env":"node config/generateEnv.js", // 生成環(huán)境變量
    "dev": "npm run env && vue-cli-service serve", // 本地開發(fā)啟動(dòng)命名入口
    "build": "npm run env && vue-cli-service build", // 遠(yuǎn)程編譯部署命令
 }

坑,最初在 vue.config 中調(diào)用 generateEnv.js 文件生成.env,文件內(nèi)容正確,沒由于命令啟動(dòng)時(shí),已加載了文件,總是慢一步,導(dǎo)致達(dá)不到預(yù)期,一次此處分開兩個(gè)步驟,獨(dú)立完成;

核心生成文件

generateEnv.js 文件

const fs = require('fs');
const path = require('path');

const loadedModules = {};

// process.env.TENANT = 'tenant01';
// process.env.APP_ENV = 'test';

function loadModule(moduleName) {
? if (loadedModules[moduleName]) {
? ? return loadedModules[moduleName];
? }
? const modulePath = `./tenant/${moduleName}.js`;
? try {
? ? const module = require(modulePath);
? ? loadedModules[moduleName] = module;
? ? return module;
? } catch (error) {
? ? console.error(`Failed to load module ${moduleName}: ${error}`);
? ? return null;
? }
}

// jenkins中會(huì)定義 process.env.TENANT 和 process.env.APP_ENV 兩個(gè)變量值;
const tenantName = process.env.TENANT || 'defaultTenant';
// 加載指定租戶的配置文件
const tenantData = loadModule(tenantName);

/**
?* 生成環(huán)境變量.env 文件;生成特定租戶對應(yīng)環(huán)境參數(shù)
?* @param {*} param
?*/
function generateEnv(mode) {
? console.log('mode = ', mode);
? const fileName = path.join(__dirname, '../.env');
? // 先同步刪除
? try {
? ? fs.unlinkSync(fileName);
? ? console.log('.env 文件已成功刪除');
? } catch (err) { }

? const envModel = tenantData[mode];
? const envDefault = tenantData.env || {};
? // 延續(xù) .env 和 evn.[mode] 合并順序,.env 中存儲(chǔ)公共默認(rèn)的,evn.[mode] 存儲(chǔ)有差異的;
? const envVars = { ...envDefault, ...envModel };

? // 將環(huán)境變量對象轉(zhuǎn)換為字符串形式
? const envString = Object.entries(envVars)
? ? .map(([key, value]) => `${key}=${value}`)
? ? .join('\n');
? try {
? ? fs.writeFileSync(fileName, envString);
? ? console.log('以下是 新生成 .env 文件內(nèi)容\n');
? ? console.log('-----bengin-------\n');
? ? console.log(envString);
? ? console.log('\n-----end-------');
? ? console.log('\n.env ?coinfig file successfully!');
? } catch (err) {
? ? console.error(err);
? }
}

/**
?* 生成 .env 環(huán)境文件;
?* jenkins中會(huì)定義 process.env.TENANT 和 process.env.APP_ENV 兩個(gè)變量值;
?* 參數(shù) 包括本地開發(fā)和服務(wù)器環(huán)境
?* 值包括:{
? * development: '本地開發(fā)',
? * dev: '開發(fā)環(huán)境',
? * test: '測試環(huán)境',
? * prd: '生產(chǎn)環(huán)境',
? * };
? ?本地開發(fā) 是沒有 process.env.TENANT 和 process.env.APP_ENV 兩個(gè)變量的,并且為了本地開發(fā)方便,默認(rèn)生成 development 環(huán)境下變量值;但如果 防止 Jenkins 中未定義,更建議你更改為 prd;
?*/
generateEnv(process.env.APP_ENV || 'development');

其中兩個(gè)變量 TENANT、APP_ENV是 Jenkins 中 自定義的 選項(xiàng)參數(shù),分別代表企業(yè)名稱和運(yùn)行環(huán)境;

注意: 參數(shù)可以注入到 node.js 中 process.env中來,我之前是不知道還可以這么玩,問了chatGPT說是可以使用,你們可以在vue.config文件中 增加一行 consle.log(process.env) ,然后查看Jenkins的輸出確認(rèn);

最終是可以獲取到值得;

  • process.env.APP_ENV
  • process.env.TENANT

配置文件

我的配置文件在 tenant目錄下,每個(gè)企業(yè)一個(gè)文件,多含多個(gè)環(huán)境節(jié)點(diǎn);以下是例子其中一個(gè)企業(yè)的文件配置,文件名等于 process.env.TENANT
變量 process.env.APP_ENV 指定運(yùn)行環(huán)境;

/**
?* NODE_ENV: 節(jié)點(diǎn)不要添加,不會(huì)生效
?*/
?module.exports = {
? /**
? ?* 默認(rèn)配置,所有環(huán)境中存在且值相同時(shí),在此處配置,各對應(yīng)環(huán)境 無需配置
? ?* 使用 Object.assign 合并數(shù)據(jù),各環(huán)境 是 Object.assign 最后一個(gè)參數(shù),覆蓋同名鍵值
? ?*/
? env: {
? ? // 數(shù)據(jù)接口連接地址
? ? VUE_APP_API_BASE_URL: '/api-agent',
? ? // 公鑰
? ? VUE_APP_PUBLIC_KEY: '',
? ? // SSO地址
? ? VUE_APP_API_SSO_URL: 'https://sso.***.com/',
? ? // 文件預(yù)覽服務(wù)器地址
? ? VUE_APP_PREVIEW_SERVER: 'https://view.***.com/view/url',
? },
? // 本地開發(fā)
? development: {
? ? // 數(shù)據(jù)接口連接地址
? ? VUE_APP_API_BASE_URL: 'http://**-dev.***.com/api-agent',
? ? // SSO地址
? ? VUE_APP_API_SSO_URL: 'https://sso-dev.***.com/',
? },
? // 開發(fā)環(huán)境
? dev: {
? ? ? // 數(shù)據(jù)接口連接地址
? ? VUE_APP_API_BASE_URL: 'http://**-dev.***.com/api-agent',
? ? // SSO地址
? ? VUE_APP_API_SSO_URL: 'https://sso-dev.***.com/',
? },
? // 測試環(huán)境
? test: {
? ? // 數(shù)據(jù)接口連接地址
? ? VUE_APP_API_BASE_URL: 'http://**-test.***.com/api-agent',
? ? // SSO地址
? ? VUE_APP_API_SSO_URL: 'https://sso-test.***.com/',
? },
? // 生產(chǎn)環(huán)境
? prd: {
? // 一般情況很少配置,讀取env節(jié)點(diǎn)

? },
};

總結(jié)

最終 我們在編譯之前,根據(jù) Jenkins 傳入的 企業(yè)和環(huán)境,生成一份新的 .env文件,提供給 編譯環(huán)境使用,以此完成動(dòng)態(tài)配置;

到此這篇關(guān)于vue項(xiàng)目多租戶環(huán)境變量的設(shè)置的文章就介紹到這了,更多相關(guān)vue 多租戶環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue首屏加載過慢出現(xiàn)長時(shí)間白屏的實(shí)現(xiàn)

    Vue首屏加載過慢出現(xiàn)長時(shí)間白屏的實(shí)現(xiàn)

    本文主要介紹了Vue首屏加載過慢出現(xiàn)長時(shí)間白屏的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • el-form表單驗(yàn)證的一些實(shí)用方法總結(jié)

    el-form表單驗(yàn)證的一些實(shí)用方法總結(jié)

    表單校驗(yàn)是注冊環(huán)節(jié)中必不可少的操作,表單校驗(yàn)通過一定的規(guī)則來確保用戶提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法,需要的朋友可以參考下
    2023-01-01
  • vue3.0+echarts實(shí)現(xiàn)立體柱圖

    vue3.0+echarts實(shí)現(xiàn)立體柱圖

    這篇文章主要為大家詳細(xì)介紹了vue3.0+echarts實(shí)現(xiàn)立體柱圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 從vue源碼看props的用法

    從vue源碼看props的用法

    平時(shí)寫vue的時(shí)候知道 props 有很多種用法,今天我們來看看vue內(nèi)部是怎么處理 props 中那么多的用法的。非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2019-01-01
  • 簡單的Vue異步組件實(shí)例Demo

    簡單的Vue異步組件實(shí)例Demo

    大家都知道當(dāng)使用時(shí)才裝入需要的組件,可以有效的提高首次裝入頁面的速度。比如在路由切換時(shí),下面這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)一個(gè)簡單的Vue異步組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。
    2017-12-12
  • vue.js項(xiàng)目中實(shí)用的小技巧匯總

    vue.js項(xiàng)目中實(shí)用的小技巧匯總

    這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • vue + typescript + 極驗(yàn)登錄驗(yàn)證的實(shí)現(xiàn)方法

    vue + typescript + 極驗(yàn)登錄驗(yàn)證的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue + typescript + 極驗(yàn) 登錄驗(yàn)證的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)

    Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)

    路由的本質(zhì)就是一種對應(yīng)關(guān)系,比如說我們在url地址中輸入我們要訪問的url地址之后,瀏覽器要去請求這個(gè)url地址對應(yīng)的資源,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下
    2022-10-10
  • Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)

    Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)

    這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后,最終得到一個(gè)值,watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對數(shù)據(jù)的變化做特定的操作,本文就這兩種屬性給大家詳細(xì)講解,感興趣的朋友一起學(xué)習(xí)吧
    2022-11-11
  • vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫示例代碼

    vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫示例代碼

    Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue?被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫的相關(guān)資料,需要的朋友可以參考下
    2023-06-06

最新評論

苗栗县| 七台河市| 汾阳市| 肃宁县| 瑞金市| 荥阳市| 临沭县| 平邑县| 化德县| 施秉县| 大姚县| 嘉黎县| 安塞县| 孟州市| 吉木萨尔县| 年辖:市辖区| 罗江县| 岳池县| 手机| 绥江县| 江津市| 安塞县| 西乌珠穆沁旗| 昌平区| 怀集县| 若尔盖县| 义马市| 普安县| 阳西县| 仙桃市| 台山市| 凌云县| 揭阳市| 辉南县| 南开区| 平山县| 高陵县| 汶川县| 庆安县| 香港 | 乳源|