vue项目多租户环境变量的设置
作者：jerry_kong
问题
在vue项目中，在 .env 文件内，以 VUE_APP*开头的变量，可以在项目源码中使用，在编译阶段由编译器静态替换为对应值；假如项目依赖一个sso地址，生产环境是 sso.xxx.com ，测试环境是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，这种将不同的环境写入到 不同的配置文件方案，很好的适配了不同环境；
但是 如果 要部署给给个企业呢，每个企业地址都不同？我们今天讨论如何解决；
策略
vue-cli在编译vue项目，环境变量是写入到.env文件中的，是我们提前准备好的；仅应用有某个企业，因此我们是否可以 node.js 去操作去读取 另外一份配置文件，将新内容 写入 .env 文件内呢？
一句话，不同企业以及多套环境，写到配置文件中，编译前 动态生成 .env 文件；
修改编译命令
package.json 中增加 evn 命令行，生成新的 .env;
"scripts": {
"env":"node config/generateEnv.js", // 生成环境变量
"dev": "npm run env && vue-cli-service serve", // 本地开发启动命名入口
"build": "npm run env && vue-cli-service build", // 远程编译部署命令
}坑，最初在 vue.config 中调用 generateEnv.js 文件生成.env,文件内容正确，没由于命令启动时，已加载了文件，总是慢一步，导致达不到预期，一次此处分开两个步骤，独立完成；
核心生成文件
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);
/**
* 生成环境变量.env 文件；生成特定租户对应环境参数
* @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 || {};
// 延续 .env 和 evn.[mode] 合并顺序，.env 中存储公共默认的，evn.[mode] 存储有差异的；
const envVars = { ...envDefault, ...envModel };
// 将环境变量对象转换为字符串形式
const envString = Object.entries(envVars)
.map(([key, value]) => `${key}=${value}`)
.join('\n');
try {
fs.writeFileSync(fileName, envString);
console.log('以下是 新生成 .env 文件内容\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 环境文件；
* jenkins中会定义 process.env.TENANT 和 process.env.APP_ENV 两个变量值；
* 参数 包括本地开发和服务器环境
* 值包括：{
* development: '本地开发',
* dev: '开发环境',
* test: '测试环境',
* prd: '生产环境',
* };
本地开发 是没有 process.env.TENANT 和 process.env.APP_ENV 两个变量的，并且为了本地开发方便，默认生成 development 环境下变量值；但如果 防止 Jenkins 中未定义，更建议你更改为 prd;
*/
generateEnv(process.env.APP_ENV || 'development');其中两个变量 TENANT、APP_ENV是 Jenkins 中 自定义的 选项参数，分别代表企业名称和运行环境；
注意: 参数可以注入到 node.js 中 process.env中来，我之前是不知道还可以这么玩，问了chatGPT说是可以使用，你们可以在vue.config文件中 增加一行 consle.log(process.env) ，然后查看Jenkins的输出确认；
最终是可以获取到值得；
- process.env.APP_ENV
- process.env.TENANT
配置文件
我的配置文件在 tenant目录下，每个企业一个文件，多含多个环境节点；以下是例子其中一个企业的文件配置，文件名等于 process.env.TENANT
变量 process.env.APP_ENV 指定运行环境；
/**
* NODE_ENV: 节点不要添加，不会生效
*/
module.exports = {
/**
* 默认配置,所有环境中存在且值相同时，在此处配置，各对应环境 无需配置
* 使用 Object.assign 合并数据，各环境 是 Object.assign 最后一个参数，覆盖同名键值
*/
env: {
// 数据接口连接地址
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',
},
// 本地开发
development: {
// 数据接口连接地址
VUE_APP_API_BASE_URL: 'http://**-dev.***.com/api-agent',
// SSO地址
VUE_APP_API_SSO_URL: 'https://sso-dev.***.com/',
},
// 开发环境
dev: {
// 数据接口连接地址
VUE_APP_API_BASE_URL: 'http://**-dev.***.com/api-agent',
// SSO地址
VUE_APP_API_SSO_URL: 'https://sso-dev.***.com/',
},
// 测试环境
test: {
// 数据接口连接地址
VUE_APP_API_BASE_URL: 'http://**-test.***.com/api-agent',
// SSO地址
VUE_APP_API_SSO_URL: 'https://sso-test.***.com/',
},
// 生产环境
prd: {
// 一般情况很少配置，读取env节点
},
};总结
最终 我们在编译之前，根据 Jenkins 传入的 企业和环境，生成一份新的 .env文件，提供给 编译环境使用，以此完成动态配置；
到此这篇关于vue项目多租户环境变量的设置的文章就介绍到这了,更多相关vue 多租户环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！