@ysfe/envs

.env.* 配置方式替代方案

Usage no npm install needed!

<script type="module">
  import ysfeEnvs from 'https://cdn.skypack.dev/@ysfe/envs';
</script>

README

@ysfe/envs

process.env 配置工具 为了解决 .env.* 多环境支持情况下, 越来越复杂的环境信息配置, 这里对这件事经进行了整合. 提供一套 process.env 配置工具

前置依赖

vue >= 2.x webpack => 4.x

开发指引

传送门

使用方式

初始化配置

  1. 全局安装: yarn global add @ysfe/envs
  2. 执行 init-env, 选择配置方式生成初始化配置.

配置文件内容解读

  1. 配置内容说明

    • def - 不同命令使用哪套环境配置
    • base - 基本配置, 建议将环境信息初始值都在 base 中定义, 然后, 将差异内容在 envs 中填写.
    • envs - 不同环境的差异性配置
  2. 覆盖策略:

    • vue-cli-service 会优先加载 .env.* 配置, 并写入到 process.env 中, 我们的策略是, 在运行时增加 polyfill, 来实现附加环境信息的逻辑, 也就是说, 当 .env.*.envs.ts 配置同时存在时, 后者的配置内容会覆盖前者.
  3. 配置文件优先级,按顺序检索配置, 顺序如下:

    1. .envs.ts
    2. .envs.js
    3. .envs.json
/** 环境信息
 *  # 配置说明
 *  # 开关项: 关 - 0 或留空 , 开 - 1
 *  # 文本项: [number, string]
 */
export default {
    def: {
        serve: 'dev',
        build: 'production'
    },
    base: {
        /* TODO | 初始变量 */
    },
    envs: {
        /** 部署 | 生产&预发 */
        production: { /* TODO */ },
        /** 部署 | 开发&测试 */
        staging: { /* TODO */ },
        /** 运行 | 生产 */
        prod: { /* TODO */ },
        /** 运行 | 测试 */
        test: { /* TODO */ },
        /** 运行 | 开发 (默认) */
        dev: { /* TODO */ }
    }
}

vue 项目内集成

  1. 安装: 执行 yarn add @ysfe/envs
  2. 创建配置文件:
  3. vue.config.js 中使用:
// + 添加下方代码
require('@ysfe/envs')

配置文件参考

配置文件路径: ./ 项目根目录, 与 .env.* 相同 提供 .envs.ts.envs.js.envs.json 三种方式配置 demo 如下:

注意事项


[其他说明事项]

版本说明

  • 2021-06-21 | 修改过时配置
  • 2021-06-09 | 抽象环境信息写入工具