React/Node应用环境变量配置求助：如何读取.bash_profile中的变量

别慌，我来一步步帮你搞定这个环境变量的配置问题！你遇到的情况是因为React项目（尤其是用Create React App搭建的）对环境变量的读取有特定规则，不是直接就能拿到bash里定义的变量的，下面分两种常见情况给你说明：

情况1：你的React项目是用Create React App（CRA）搭建的 #

CRA默认只会识别以REACT_APP_开头的环境变量，所以直接写process.env.XREFS_BACK_URL是取不到值的，你可以用下面两种方法解决：

• 方法一：修改启动脚本注入变量
  打开项目根目录的package.json，找到scripts里的start命令，改成下面这样：

  "scripts": {
    "start": "REACT_APP_XREFS_BACK_URL=$XREFS_BACK_URL react-scripts start"
  }
  

  这样每次执行npm run start时，就会把你.bash_profile里的XREFS_BACK_URL变量注入到React环境中，之后你在代码里就可以用process.env.REACT_APP_XREFS_BACK_URL来访问这个地址了。

• 方法二：用.env文件中转变量
  在项目根目录创建一个.env.development文件（开发环境用），里面写入：

  REACT_APP_XREFS_BACK_URL=${XREFS_BACK_URL}
  

  CRA会自动读取这个文件的内容，把变量注入到前端环境里，同样你在代码里用process.env.REACT_APP_XREFS_BACK_URL就能拿到值。

注意：不管用哪种方法，修改完配置后都要重启npm run start，新的环境变量才会生效！

情况2：你的React项目是自定义配置的（比如自己搭的Webpack环境） #

如果你的项目不是用CRA，而是自己配置的Webpack，那需要在Webpack配置里手动注入环境变量：

1. 打开项目的webpack.config.js文件，引入Webpack并添加DefinePlugin插件：

const webpack = require('webpack');

module.exports = {
  // 其他已有的配置项...
  plugins: [
    // 注入环境变量
    new webpack.DefinePlugin({
      'process.env.XREFS_BACK_URL': JSON.stringify(process.env.XREFS_BACK_URL)
    })
  ]
};

2. 保存配置后重启项目，这样你在代码里直接用process.env.XREFS_BACK_URL就能拿到.bash_profile里定义的地址了。

额外检查：确认环境变量已生效 #

在启动项目前，先打开终端输入：

echo $XREFS_BACK_URL

如果能输出你定义的后端地址，说明变量已经生效；如果没输出，先执行source ~/.bash_profile让.bash_profile的修改生效，再启动项目。

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