vue項目多租戶環(huán)境變量如何設置

本篇內(nèi)容主要講解“vue項目多租戶環(huán)境變量如何設置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue項目多租戶環(huán)境變量如何設置”吧!

問題

在vue項目中，在 .env 文件內(nèi)，以 VUE_APP*開頭的變量，可以在項目源碼中使用，在編譯階段由編譯器靜態(tài)替換為對應值；假如項目依賴一個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文件中的，是我們提前準備好的；僅應用有某個企業(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", // 遠程編譯部署命令
 }

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

核心生成文件

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 文件；生成特定租戶對應環(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 中存儲公共默認的，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ā)和服務器環(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ā)方便，默認生成 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的輸出確認；

最終是可以獲取到值得；

• 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 = {
  /**
   * 默認配置,所有環(huán)境中存在且值相同時，在此處配置，各對應環(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/',
    // 文件預覽服務器地址
    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é)點

  },
};

到此，相信大家對“vue項目多租戶環(huán)境變量如何設置”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！