vue項目多租戶環(huán)境變量的設(shè)置
問題
在vue項目中,在 .env 文件內(nèi),以 VUE_APP*開頭的變量,可以在項目源碼中使用,在編譯階段由編譯器靜態(tài)替換為對應(yīng)值;假如項目依賴一個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)境;
但是 如果 要部署給給個企業(yè)呢,每個企業(yè)地址都不同?我們今天討論如何解決;
策略
vue-cli在編譯vue項目,環(huán)境變量是寫入到.env文件中的,是我們提前準(zhǔn)備好的;僅應(yīng)用有某個企業(yè),因此我們是否可以 node.js 去操作去讀取 另外一份配置文件,將新內(nèi)容 寫入 .env 文件內(nèi)呢?
一句話,不同企業(yè)以及多套環(huán)境,寫到配置文件中,編譯前 動態(tài)生成 .env 文件;
修改編譯命令
package.json 中增加 evn 命令行,生成新的 .env;
"scripts": { "env":"node config/generateEnv.js", // 生成環(huán)境變量 "dev": "npm run env && vue-cli-service serve", // 本地開發(fā)啟動命名入口 "build": "npm run env && vue-cli-service build", // 遠(yuǎn)程編譯部署命令 }
坑,最初在 vue.config 中調(diào)用 generateEnv.js 文件生成.env,文件內(nèi)容正確,沒由于命令啟動時,已加載了文件,總是慢一步,導(dǎo)致達不到預(yù)期,一次此處分開兩個步驟,獨立完成;
核心生成文件
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中會定義 process.env.TENANT 和 process.env.APP_ENV 兩個變量值; 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 中存儲公共默認(rèn)的,evn.[mode] 存儲有差異的; ? 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中會定義 process.env.TENANT 和 process.env.APP_ENV 兩個變量值; ?* 參數(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 兩個變量的,并且為了本地開發(fā)方便,默認(rèn)生成 development 環(huán)境下變量值;但如果 防止 Jenkins 中未定義,更建議你更改為 prd; ?*/ generateEnv(process.env.APP_ENV || 'development');
其中兩個變量 TENANT、APP_ENV是 Jenkins 中 自定義的 選項參數(shù),分別代表企業(yè)名稱和運行環(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目錄下,每個企業(yè)一個文件,多含多個環(huán)境節(jié)點;以下是例子其中一個企業(yè)的文件配置,文件名等于 process.env.TENANT
變量 process.env.APP_ENV 指定運行環(huán)境;
/** ?* NODE_ENV: 節(jié)點不要添加,不會生效 ?*/ ?module.exports = { ? /** ? ?* 默認(rèn)配置,所有環(huán)境中存在且值相同時,在此處配置,各對應(yīng)環(huán)境 無需配置 ? ?* 使用 Object.assign 合并數(shù)據(jù),各環(huán)境 是 Object.assign 最后一個參數(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é)點 ? }, };
總結(jié)
最終 我們在編譯之前,根據(jù) Jenkins 傳入的 企業(yè)和環(huán)境,生成一份新的 .env文件,提供給 編譯環(huán)境使用,以此完成動態(tài)配置;
到此這篇關(guān)于vue項目多租戶環(huán)境變量的設(shè)置的文章就介紹到這了,更多相關(guān)vue 多租戶環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Vue2.0和Typescript實現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實現(xiàn)多主題切換的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04vue element實現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程詳解
這篇文章主要介紹了vue element實現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12element?ui?watch?el-input賦值之后無法刪除或修改問題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02Vue cli構(gòu)建及項目打包以及出現(xiàn)的問題解決
這篇文章主要介紹了Vue cli構(gòu)建及項目打包以及出現(xiàn)的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08