Question

我似乎已经尝试了env-cmd命令的所有变体，但无法弄清为什么我无法访问变量

我最初遵循本教程 https://www.youtube.com/watch?v=3SH5AQsHypA

但是文档自此发生了变化，因此您需要使用-e命令而不是视频命令，因此我的package.json命令读取...

"dev-server": "env-cmd -e dev webpack-dev-server",

任何我的.env-cmdrc读取...

{
    "dev" : {
        "BASE_URL" : "development"
    },
    "qa" : {
        "BASE_URL" : "qa"
    },
    "prod" : {
        "BASE_URL" : "prod"
    }
}

但是由于某种原因，我无法访问process.env.BASE_URL。任何帮助将不胜感激

Answer 1

对于任何对此感兴趣的人。最终，这实际上是通过使用Dotenv-webpack库解决的

https://www.npmjs.com/package/dotenv-webpack

在您的webpack配置文件中；

const Dotenv = require('dotenv-webpack');

将env的参数传递给module.exports

module.exports = (env) => {
 let ENV_CONFIG;

 if(env === 'dev'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-dev'})
 }

 if(env === 'staging'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-staging'})
 }

 if(env === 'production'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-production'})
 }
}

然后使用插件...

plugins : [
    ENV_CONFIG
]

您的package.json脚本可能看起来像..

"build:prod": "webpack -p --env production"

然后您应该可以像下面这样在process.env下访问变量；

process.env.SERVER_URL

Answer 2

您需要在环境变量前面加上REACT_APP_，否则将忽略这些变量以避免冲突。

文档说将.env文件放置在根目录（/src）中，但我设法摆脱了/src/environments/.env.local以及.env.staging和{{1 }}。

我正在使用.env.production，我的命令如下：

env-cmd

http://create-react-app.dev/docs/adding-custom-environment-variables/

Answer 3

package.json

"dev-server": "env-cmd dev webpack-dev-server",

添加前缀

REACT_APP _

{ 
  "dev" : 
      { "REACT_APP_BASE_URL" : "development" }, 
  "qa" : 
      { "REACT_APP_BASE_URL" : "qa" }, 
  "prod" : 
      { "REACT_APP_BASE_URL" : "prod" } 
}

重新运行项目并使用

调用它

process.env.REACT_APP_BASE_URL

Answer 4

Create React App文档指出，您必须在.env文件中的所有环境变量前面加上REACT_APP_前缀，这样才能在代码过程中使用它们。env.REACT_APP_。

尝试

REACT_APP_BASE_URL

代替BASE_URL

React中的Env-cmd环境变量

4 个答案: