vue项目多租户环境变量的设置

 更新时间:2023年04月20日 09:16:45   作者:jerry_kong  
本文主要介绍了vue项目多租户环境变量的设置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题

在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 多租户环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • babel7.x和webpack4.x配置vue项目的方法步骤

    babel7.x和webpack4.x配置vue项目的方法步骤

    这篇文章主要介绍了babel7.x和webpack4.x配置vue项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue.js2.0中的变化小结

    Vue.js2.0中的变化小结

    最近小编在学习vue.js ,发现里面有好多好玩的东东,今天小编给大家分享Vue.js2.0中的变化,小编会在日后给大家持续更新的,感兴趣的朋友参考下吧
    2017-10-10
  • vue2.0开发实践总结之疑难篇

    vue2.0开发实践总结之疑难篇

    这篇文章主要为大家总结了vue2.0开发实践的疑难,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue实现div高度可拖拽

    vue实现div高度可拖拽

    这篇文章主要为大家详细介绍了vue实现div高度可拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue-cli3+echarts实现渐变色仪表盘组件封装

    vue-cli3+echarts实现渐变色仪表盘组件封装

    这篇文章主要为大家详细介绍了vue-cli3+echarts实现渐变色仪表盘组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue数据初始化initState的实例详解

    vue数据初始化initState的实例详解

    Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState。这篇文章主要介绍了vue数据初始化--initState,需要的朋友可以参考下
    2019-04-04
  • Vue插件使用方法详情分享

    Vue插件使用方法详情分享

    这篇文章主要介绍了Vue插件使用方法详情分享,使用插件之前显示定义,下文通过js插件定义展开详细文章介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-03-03
  • vue-calendar-component日历组件报错Clock is not defined解决

    vue-calendar-component日历组件报错Clock is not defi

    这篇文章主要为大家介绍了vue-calendar-component日历组件报错Clock is not defined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vscode下vue项目中eslint的使用方法

    vscode下vue项目中eslint的使用方法

    这篇文章主要给大家介绍了关于vscode下vue项目中eslint的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • el-upload http-request使用 多个文件上传携带其他参数方式

    el-upload http-request使用 多个文件上传携带其他参数方式

    这篇文章主要介绍了el-upload http-request使用 多个文件上传携带其他参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论