Question

我想将变量存储在.env变量中，并像process.env一样使用

我在根目录中添加了.env文件

REACT_APP_FOO = abcc111

webpack.config.dev.js

plugins: [
    new webpack.ProvidePlugin({
        React: 'react'
    }),
     new webpack.DefinePlugin({
       "process.env":{
       'REACT_APP_FOO': JSON.stringify(process.env.REACT_APP_FOO)
     }
   })
],

App.js

console.log(process.env);

结果是：

{REACT_APP_FOO: undefined}

请让我知道我是否在这里丢失任何东西。

Answer 1

添加.env内容的步骤

1）npm install dotenv --save

2）在Webpack配置文件顶部

const dotenv = require('dotenv').config({path: __dirname + '/.env'});

3）然后在应用程序的根目录中创建一个.env文件，并将变量添加到其中。

//。env的内容

REACT_APP_FOO = abcc111

4）webpack配置文件

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

4）将.env添加到您的.gitignore文件中，以便Git忽略它，并且它永远不会在GitHub上结束。在.env文件中添加变量后，需要重新启动应用程序。

如果您使用的是create-react-app，它会使用react-scripts，它具有dotenv的相关性，因此您不必安装和配置，只需创建{{1 }}文件并在您的应用程序中使用。 公约名称应以REACT_APP开头

希望有帮助！

在React js中获取环境变量未定义

1 个答案: