React 中设置环境变量（开发环境、测试环境和生产环境）

React 中设置环境变量（开发环境、测试环境和生产环境）

环境 React ,Umi框架

 1. 安装插件：cross-env

npm i cross-env -S

 

 

2. 修改 package.json 文件

  "scripts": {
    "dev": "cross-env REACT_APP_ENV=dev umi dev",
    "dev:prod": "cross-env REACT_APP_ENV=prod umi dev",
    "build": "cross-env REACT_APP_ENV=dev umi build",
    "build:prod": "cross-env REACT_APP_ENV=prod umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
    "start": "npm run dev",
    "test": "cross-env TS_NODE_TRANSPILE_ONLY=yes jest --passWithNoTests"
  },

 

 

3. 创建配置文件

在跟目录下创建 host.ts文件

export default {
  dev: { Url_Mate: "https://wwww.development.com/" },
  prod: { Url_Mate: "https://www.production.com" },
};

 

 

4. 定义变量，打开.umirc.ts 文件

import { defineConfig } from "umi";
import host from "./host";

const { REACT_APP_ENV } = process.env;
export default defineConfig({
  base: "/dict",
  npmClient: "yarn",
  tailwindcss: {},
  mfsu: false,
  codeSplitting: {
    jsStrategy: "granularChunks",
    jsStrategyOptions: {},
  },
  plugins: ["@umijs/plugins/dist/tailwindcss"],
  copy: [
    {
      from: "Dockerfile",
      to: "dist",
    },
  ],
  define: {
    // "process.env": {
    //   NODE_ENV: process.env.REACT_APP_ENV,
    // },
    Url_Mate: host[REACT_APP_ENV].Url_Mate,
  },
});

 

 

使用：在 api 接口文件中，直接使用Url_Mate变量

const apiPath = Url_Mate;

 

 

 

注：如在 api 接口文件中获取 环境变量

const eenv = process.env;

 

 

只能获取到如下内容

 

 但是在.umirc.ts 文件 中可获取到  package.json 中配置的环境变量

const { REACT_APP_ENV } = process.env;

 

如需要 api 接口文件中获取 配置的环境变量，需在.umirc.ts 文件 中配置

  define: {
     "process.env": {
       NODE_ENV: process.env.REACT_APP_ENV,
     },
    Url_Mate: host[REACT_APP_ENV],
  },

 

 

 

end