iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目多租户环境变量的设置
  • 338
分享到

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

vue多租户环境变量vue多租户 2023-05-16 17:05:26 338人浏览 八月长安
摘要

目录问题策略修改编译命令核心生成文件配置文件总结问题 在Vue项目中,在 .env 文件内,以 VUE_APP*开头的变量,可以在项目源码中使用,在编译阶段由编译器静态替换为对应值;

问题

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);


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);
  }
}


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 指定运行环境;


 module.exports = {
  
  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 多租户环境变量内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue项目多租户环境变量的设置

本文链接: https://www.lsjlt.com/news/210387.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue项目多租户环境变量的设置
    目录问题策略修改编译命令核心生成文件配置文件总结问题 在vue项目中,在 .env 文件内,以 VUE_APP*开头的变量,可以在项目源码中使用,在编译阶段由编译器静态替换为对应值;...
    99+
    2023-05-16
    vue 多租户环境变量 vue 多租户
  • React项目中动态设置环境变量
    目录使用 dotenv 库1. 安装 dotenv 库2. 创建 .env 文件3. 在项目中使用环境变量通过命令行参数传递环境变量1. 在 package.json 中定义命令2....
    99+
    2023-05-16
    React 动态设置环境变量 React 环境变量
  • go项目中环境变量的配置
    目录一、为什么要配置文件二、在go中使用配置文件三、使用结构体的方式读取四、区分开发环境和生产环境五、在gin中集成配置文件一、为什么要配置文件 1、容易编辑,配置比较集中,方便修改...
    99+
    2024-04-02
  • vue如何设置环境变量
    这篇文章将为大家详细讲解有关vue如何设置环境变量,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue设置环境变量在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境vue 中有个概念就是模式,默...
    99+
    2023-06-29
  • vue项目多环境配置(.env)的实现
    目录什么是多环境配置,为什么要多环境配置?.env 文件配置到哪里.env文件如何配置,配置多少个?.env文件的配置如何配置运行环境如何获取全局配置项的值如何运行环境没接触...
    99+
    2024-04-02
  • vue项目多环境配置得方法
    这篇文章主要介绍“vue项目多环境配置得方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue项目多环境配置得方法”文章能帮助大家解决问题。什么是多环境配置,为什...
    99+
    2024-04-02
  • go项目中环境变量的配置方法
    这篇文章主要介绍“go项目中环境变量的配置方法”,在日常操作中,相信很多人在go项目中环境变量的配置方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”go项目中环境变量的配置方法”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-20
  • vue项目多环境配置的实现方法
    这篇文章主要讲解了“vue项目多环境配置的实现方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目多环境配置的实现方法”吧!目录什么是多环境配置,为什么要多环境配置.env 文件配置...
    99+
    2023-06-20
  • java环境变量设置
    在设置 Java 环境变量之前,需要确保已经成功安装了 Java JDK(Java Development Kit)。以下是在Windows上设置 Java 环境变量的步骤:Windows 上的设置步骤:打开控制面板并选择"系统和...
    99+
    2023-07-10
  • vue 开发环境和生产环境设置不同的变量
    在 Vue 开发中,我们很常见要在不同的环境下设置不同的变量。例如在 development 环境下,我们可能需要打开一些调试工具,而在 production 环境下,我们则需要关闭这些调试工具来提高应用的性能。这时候,我们就需要在开发环境...
    99+
    2023-05-24
  • Docker - 设置环境变量
    文章目录 设置环境变量查看环境变量方式一 docker inspect 命令来查看方式二 docker exec 容器id env 设置环境变量 --env 或者-e指定docker的环境变量 key=value do...
    99+
    2023-08-16
    docker mysql 服务器
  • 关于vue设置环境变量全流程
    目录vue设置环境变量创建不同环境变量文件给.env文件添加内容在package.json中添加不同环境对应的执行语句使用多环境变量什么是多环境变量?配置流程vue设置环境变量 在开...
    99+
    2024-04-02
  • nuxt.js 多环境变量配置
    目录1、前言2、场景3、创建环境3.1 注入环境变量4、最后1、前言 一般在我们项目开发中,一般会有以下3个环境 开发环境也叫测试环境(test) RC环境也叫预发...
    99+
    2024-04-02
  • linux当前用户环境变量如何设置
    在Linux中,可以使用命令行来设置当前用户的环境变量。下面是具体的步骤:1. 打开终端,使用`vim`或者其他文本编辑器打开`~/...
    99+
    2023-09-06
    linux
  • 怎么设置环境变量
    本篇内容主要讲解“怎么设置环境变量”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么设置环境变量”吧!很多人都知道环境变量,很多人也在使用环境变量。但是很多人一说到在 Linux、macOS 中...
    99+
    2023-06-15
  • java环境变量的设置方式
    这篇文章主要介绍“java环境变量的设置方式”,在日常操作中,相信很多人在java环境变量的设置方式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”java环境变量的设置方式”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-03
  • Linux设置环境变量的方法
    本篇内容主要讲解“Linux设置环境变量的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Linux设置环境变量的方法”吧!Linux是一个多用户的操作系统。多用户意味着每个用户登录系统后,都...
    99+
    2023-06-15
  • python的环境变量如何设置
    在Python中,环境变量可以通过以下方法进行设置:1. 在操作系统中设置环境变量:你可以在操作系统的环境变量设置中添加Python...
    99+
    2023-08-09
    python
  • 设置mysql环境变量的方法
    这篇文章给大家分享的是有关设置mysql环境变量的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。设置mysql的环境变量的方法:1、依次点击【计算机】、【系统属性】、【高级系...
    99+
    2024-04-02
  • JDK1.8环境变量怎么设置
    本篇内容主要讲解“JDK1.8环境变量怎么设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JDK1.8环境变量怎么设置”吧!JDK1.8环境变量export JAVA_HOME=/usr/lo...
    99+
    2023-06-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作