环境配置：轻松切换多环境，变量灵活配置

轻松管理多环境：掌握环境变量、全局变量和动态页面的配置

环境变量配置：无缝切换不同环境

随着项目规模和复杂度的不断攀升，在不同环境中管理项目成为企业和个人的一大痛点。不同环境往往需要不同的网络请求地址、图片路径等全局变量。为了解决这一难题，umi 和 antdPro 这两大前端框架提供了环境变量配置功能，让您轻松切换不同环境的配置。

首先，在项目根目录下新建 .env.development 和 .env.production 配置文件，分别用于开发和生产环境。在配置文件中，您可以设置如下的环境变量：

REACT_APP_API_URL=http://localhost:8000
REACT_APP_IMAGE_URL=http://localhost:8080/images

这样，当您在开发环境运行项目时，将使用 .env.development 中的环境变量，而在生产环境运行项目时，将使用 .env.production 中的环境变量。

全局变量配置：灵活管理变量

umi 和 antdPro 同时提供了全局变量配置功能，让您轻松配置和管理各种全局变量。在项目 src 目录下新建一个 config.js 文件，用于配置全局变量。您可以设置如下的全局变量：

export default {
  title: '我的项目',
  api: {
    baseUrl: 'http://localhost:8000',
    timeout: 10000
  }
}

然后，在项目中使用全局变量时，直接通过 import 导入 config.js 文件，并使用其导出的变量即可。例如，在需要使用 title 变量的地方，可以这样写：

import config from '@/config'

const MyComponent = () => {
  return (
    <div>
      <h1>{config.title}</h1>
    </div>
  )
}

这样，您就可以轻松地配置和管理各种全局变量，而无需在每个组件中重复设置。

动态页面实现：注入变量到页面

umi 和 antdPro 还提供了 document.ejs 功能，可以轻松地将全局变量注入到页面中。在项目 public 目录下新建一个 index.ejs 文件，用于配置页面模板。您可以使用 ejs 语法注入全局变量。例如，在需要注入 title 变量的地方，可以这样写：

然后，在项目的 config.js 文件中，将 document.ejs 设置为项目的模板文件：

export default {
  title: '我的项目',
  api: {
    baseUrl: 'http://localhost:8000',
    timeout: 10000
  },
  document: {
    title: '我的项目',
    description: '这是一个示例项目'
  }
}

这样，当您在项目中使用 document.ejs 文件时，就可以轻松地将全局变量注入到页面中。

结语：轻松驾驭多环境，灵活配置变量

通过利用 umi 和 antdPro 的环境变量配置、全局变量配置和 document.ejs 功能，您可以轻松切换多环境、灵活配置全局变量，并实现动态页面。这样，您就可以轻松地管理您的项目，并在不同环境之间快速切换，而无需担心环境变量和全局变量的配置问题。

常见问题解答

1. 如何配置多个环境变量？
   创建多个 .env 文件，例如 .env.development、.env.production 等，并在每个文件中设置不同的环境变量。

2. 如何使用全局变量？
   导入 config.js 文件，并使用其导出的变量。例如：import config from '@/config'。

3. 如何将变量注入到页面中？
   使用 document.ejs 文件并注入变量。例如：``。

4. 如何切换不同环境？
   修改 npm start 命令中的环境变量。例如：npm start --env=development。

5. 如何创建动态页面？
   使用 document.ejs 文件并注入变量。例如：<p><%- config.description %></p>。