除了 dotenv
之外,还有许多其他方法可以实现多环境配置。特别是针对不同的框架,会有更合适的方法。比如你使用的是 Umi 框架,Umi 提供了内置的管理多环境配置的支持。
使用 Umi 配置多环境支持
Umi 框架本身就支持根据不同的环境进行配置。通常通过 config/config.[env].js
文件来实现多环境配置。在 Umi 框架中,这些配置文件会根据不同的环境变量自动加载。
基本步骤
-
创建环境配置文件:
在 Umi 项目的config
目录下创建针对不同环境的配置文件。例如:config/config.dev.js
config/config.prod.js
config/config.test.js
每个文件中导出相应的配置。例如:
// config/config.dev.js export default { define: { 'process.env.API_URL': 'http://localhost:3000/api', }, }; // config/config.prod.js export default { define: { 'process.env.API_URL': 'https://production-url.com/api', }, }; // config/config.test.js export default { define: { 'process.env.API_URL': 'http://test-url.com/api', }, };
-
启动项目时指定环境:
Umi 会基于
NODE_ENV
加载相应的配置文件。可以通过以下命令启动项目:# 启动开发环境 cross-env UMI_ENV=dev umi dev # 启动生产环境 cross-env UMI_ENV=prod umi build # 启动测试环境 cross-env UMI_ENV=test umi test
注意:你可能需要安装
cross-env
来跨平台设置环境变量。npm install cross-env --save-dev
-
在代码中引用环境变量:
你可以像平常一样在代码中引用环境变量。例如:
const apiUrl = process.env.API_URL; console.log(apiUrl); // 对应环境的 API URL
完整的示例代码
假设你有一个简单的 Umi 应用,目录结构如下:
my-umi-app/
├── config/
│ ├── config.dev.js
│ ├── config.prod.js
│ └── config.test.js
├── src/
│ ├── pages/
│ │ └── index.js
├── .umirc.js
├── package.json
└── ...
各个配置文件内容如下:
config/config.dev.js:
export default {
define: {
'process.env.API_URL': 'http://localhost:3000/api',
},
};
config/config.prod.js:
export default {
define: {
'process.env.API_URL': 'https://production-url.com/api',
},
};
config/config.test.js:
export default {
define: {
'process.env.API_URL': 'http://test-url.com/api',
},
};
在你的代码中可以使用这些环境变量:
src/pages/index.js:
import React from 'react';
const IndexPage = () => {
console.log(process.env.API_URL);
return (
<div>
<h1>API URL: {process.env.API_URL}</h1>
</div>
);
};
export default IndexPage;
启动和打包命令:
# 启动开发环境
cross-env UMI_ENV=dev umi dev
# 启动生产环境
cross-env UMI_ENV=prod umi build
# 启动测试环境
cross-env UMI_ENV=test umi test
这种方法使得在不同的环境中可以轻松地配置不同的参数,并且在项目中直接使用这些参数。Umi 框架提供的这个内置功能,使得环境管理更加方便和直观。