@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 项目内集成

2. 安装: 执行 yarn add @ysfe/envs
3. 创建配置文件:
4. 在 vue.config.js 中使用:

// + 添加下方代码
require('@ysfe/envs')

配置文件参考

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

• .envs.ts
• .envs.js
• .envs.json

注意事项

[其他说明事项]

版本说明

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