如何在JSON文件中使用.env文件声明的URL？

JSON属于静态文件，无法直接解析process.env这类运行时环境变量，下面提供几种可行的解决方法：

方法一：将JSON文件替换为JS模块 #

这是最简单直接的方案，把需要嵌入变量的JSON文件改成.js模块，直接在代码中使用环境变量：

1. 例如将原config.json重命名为config.js，内容修改为：

export default {
  apiEndpoint: `${process.env.REACT_APP_BASE_URL}/api/v1`,
  timeout: 3000,
  otherSettings: "default"
};

2. 在组件或其他代码中导入使用：

import appConfig from './config.js';

console.log(appConfig.apiEndpoint); // 输出拼接后的完整URL

方法二：构建时替换JSON中的占位符 #

如果必须保留JSON文件，可以在构建阶段通过脚本替换文件中的占位符：

1. 先在JSON文件中定义占位符，比如config.json：

{
  "apiUrl": "{{REACT_APP_BASE_URL}}/api",
  "version": "1.0.0"
}

2. 修改package.json的构建命令，根据系统添加替换逻辑：
   • Linux/macOS：

   "scripts": {
     "build": "REACT_APP_BASE_URL=$REACT_APP_BASE_URL sed -i '' 's/{{REACT_APP_BASE_URL}}/'\"$REACT_APP_BASE_URL\"'/g' src/config.json && react-scripts build"
   }
   

   • Windows：

   "scripts": {
     "build": "(powershell -Command \"(Get-Content src/config.json) -replace '{{REACT_APP_BASE_URL}}', $env:REACT_APP_BASE_URL | Set-Content src/config.json\") && react-scripts build"
   }
   

   注意：该方法会直接修改源JSON文件，建议构建前做好备份，或者针对临时副本进行操作。

方法三：通过Webpack插件实现替换（需自定义Webpack配置） #

如果你的项目已经 eject，或者使用了craco/react-app-rewired等工具自定义Webpack配置，可以借助插件实现替换：

1. 安装必要依赖（如果未安装）：

npm install dotenv copy-webpack-plugin --save-dev

2. 在Webpack配置文件中添加以下逻辑：

const webpack = require('webpack');
const dotenv = require('dotenv').config({ path: './.env' });
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他原有配置
  plugins: [
    // 注入环境变量到全局
    new webpack.DefinePlugin({
      'process.env.REACT_APP_BASE_URL': JSON.stringify(dotenv.parsed.REACT_APP_BASE_URL)
    }),
    // 复制并替换JSON文件中的占位符
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/config.json',
          to: 'config.json',
          transform: (content) => {
            return content.toString().replace('{{REACT_APP_BASE_URL}}', process.env.REACT_APP_BASE_URL);
          }
        }
      ]
    })
  ]
};

内容的提问来源于stack exchange，提问作者Avanish Srivastava