react项目在不暴露配置文件的情况下配置环境变量

react项目在不暴露配置文件的情况下修改打包配置需要用到 react-app-rewired和customize-cra 包对打包配置文件进行修改。

 

添加自定义环境变量有两种方法：

方法1：使用dotenv-cli

1、运行 yarn global add dotenv-cli 全局安装 dotenv-cli

2、在根目录下添加.env.pre文件，写入变量

REACT_APP_MOCK='true'　

如果是测试环境，则新建 .env.development.pre 文件而不是 .env.pre 文件

注意：变量名称已 REACT_APP_开头，不然业务代码里面没有这个变量

 

3、修改config-overrides.js 配置文件，如果没有就在根目录创建一个

const webpack = require('webpack')
...
const config = {
    webpack: override(
...
        addWebpackPlugin(
            // 添加的环境变量
            new webpack.DefinePlugin({
            }),
    )
...
}
...
module.exports = config;

 

 4、修改运行命令

- "start": "react-app-rewired start",
+ "start:mock": "dotenv -e .env.development.pre react-app-rewired start",

5、运行 npm run start:mock 命令，则业务代码中就有 process.env.REACT_APP_MOCK 变量了。

 

 

以上方法是不同命令可以配置不同的环境变量，如果配置对应环境的独有环境变量可以新建对应环境的文件，如：

生产环境新建 .env.production 文件，在里面添加环境变量

测试环境新建 .env.development 文件，在里面添加环境变量

所有环境都生效可以配置 .env 文件，在里面添加环境变量

 

---------------------------------------------------

以下是无效方法

 

网上找的其他方法无效，如：https://blog.csdn.net/xiliuhu/article/details/123641929

// config-override.js
 
const webpack = require('webpack')
 
const {
  override,
  addWebpackPlugin,
} = require('customize-cra')
 
module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      "process.env.VERSION": JSON.stringify(333)
    })
  )
)

尝试过，在业务代码中打印 process.env 对象，没有 VERSION 属性。