umi+cross-env 工程多环境配置

概要

1. umi
2. cross-env 多环境配置

umi

简单介绍

Check umijs here

umi = roadhog + 路由 + HTML 生成 + 完善的插件机制

cross-env多环境配置

为什么需要多环境配置

一般,工程存在三个环境配置即开发环境 dev,测试环境 staging,正式环境 prod,配置中的插件,路由,语言等配置一般情况下可以在多个环境通用。
但是其中的第三方应用密钥,接口地址等都可能因为环境的改变而改变。

当需要发布至其他环境,则需要在打包前对配置进行手动的修改或替换。来让 SDK 确定打包时使用或输出后的配置文件。

cross-env

使用 cross-env,在打包使用的命令中加入环境参数的标识。让 umi 的打包省去修改配置的步骤,实现一键打包。

实操

umi 的配置可以使用.umirc.ts 或 config/config.ts,我们这里使用 config.ts 作为例子。
首先提取公共的项目配置部分保存为 config.ts。

import { IConfig } from 'umi-types'; // ref: https://umijs.org/config/

const baseConfig: IConfig = {
  treeShaking: true,
  routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        {
          path: '/',
          component: './index',
        }
      ],
    },
  ],
  plugins: [
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: true,
        dynamicImport: {
          webpackChunkName: true,
        },
        title: 'Demo',
        dll: true,
        locale: {
          enable: true,
          default: 'en-US',
        },
        routes: {
          exclude: [
            /models\//,
            /services\//,
            /model\.(t|j)sx?$/,
            /service\.(t|j)sx?$/,
            /components\//,
          ],
        },
      },
    ],
  ],
};
export default baseConfig;

新建 config.dev.ts,config.prod.ts,导入公共配置并加入开发环境以及正式环境的特有配置。

import { IConfig } from 'umi-types'; // ref: https://umijs.org/config/
import baseConfig from './config'; // ref: https://umijs.org/config/

const config: IConfig = {
  ...baseConfig,
  define: {
    "process.env.apiUrl": 'https://api.test.com',
    "process.env.appKey": 'key',
    "process.env.appSecret": 'secret'
  },
};

export default config;

代码中使用process.env.apiUrl即可获取到当前配置的对应值

开启 dev-server

    cross-env UMI_ENV=dev umi dev

打包

    cross-env UMI_ENV=prod umi build

5 thoughts on “umi+cross-env 工程多环境配置”

  1. ссылка на гидру в тор браузер достаточно крупный, в целом, это одна из наиболее популярных площадок в странах СНГ. Потому, если вам нужны какие-либо запрещенные категории товаров, то вы гарантированно найдете их здесь.И большое количество других товаров, которые относятся к этим общим категориям. Кроме того, Гидра и сайт площадки постоянно развиваются, магазинов становится все больше, ассортимент товаров растет, потому, если здесь чего-то не было вчера, может появится сегодня.

  2. Получить ссылку на гидру и безопасно совершить покупку возможно на нашем сайте. В интернете очень часто можно наткнуться на мошенников и потерять свои личные денежные средства. Поэтому для Вашей безопасности мы разработали данный портал на котором Вы всегда можете получить доступ к магазину торговой площадки гидра сайт. Для совершения покупок на торговой площадке гидра наш портал ежедневно посещает большое количество пользователей, для получения актуальной рабочей ссылки, достаточно просто нажать на кнопку открыть и безопасно совершить покупку, а если Вы впервые зашли на сайт перед приобретением товара необходимо пройти регистрацию и пополнить баланс. Ваша безопасность наша важнейшая задача, которую мы с гордостью выполняем.

  3. Большинство людей сегодня используют интернет не столько для получения информации, сколько для покупок различных товаров, которые просто заполонили его. И здесь также можно найти запрещенные к продаже и незаконные категории. Но не в обычном поисковике по типу Яндекса, а в отдельной зоне, известной как Даркнет. Одной из площадок этой сети и является гидра сайт ссылка, сайт которой мы и рассмотрим более подробно в этой статье. Потому, если для вас тема приобретения незаконных товаров актуальна, то вам материал будет полезен.

  4. Большинство людей сегодня используют интернет не столько для получения информации, сколько для покупок различных товаров, которые просто заполонили его. И здесь также можно найти запрещенные к продаже и незаконные категории. Но не в обычном поисковике по типу Яндекса, а в отдельной зоне, известной как Даркнет. Одной из площадок этой сети и является hydra, сайт которой мы и рассмотрим более подробно в этой статье. Потому, если для вас тема приобретения незаконных товаров актуальна, то вам материал будет полезен.

Leave a Reply

Your email address will not be published. Required fields are marked *