Question

我想访问前端（反应）中定义的一些环境变量。

我有以下设置：

React + NodeJS（我不使用create-react-app）
Webpack 4
Dotenv

我尝试遵循https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5#0618，但是它没有起作用，或者引发了任何错误。

webpack.config.js

const dotenv = require("dotenv");

module.exports = () => {
  // call dotenv and it will return an Object with a parsed key
  const env = dotenv.config().parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(env).reduce((prev, next) => {
    console.log(prev)
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

return { 
  ...,
  plugins: [
      new webpack.DefinePlugin(envKeys)
  ],
  ...
}

使用上述Webpack配置，我认为我应该能够在<h4>My var: {process.env.REACT_APP_MY_VAR}</h4>中进行file.js，当然我已经在项目中的REACT_APP_MY_VAR文件中定义了.env根。

以上，我希望file.js呈现REACT_APP_MY_VAR的值，但是我确实不呈现任何值或错误。

Answer 1

为了简化配置，我建议使用dotenv-webpack而不是dotenv软件包。

4个简单步骤：-

1）使用

安装dotenv-wepack

npm install dotenv-webpack --save

2）在应用程序的根目录下创建.env文件

API_URL=http://localhost:8000

3）将此添加到您的webpack配置文件中。

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

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

4）在应用程序中的任何位置使用环境变量。

import React from 'react';

    const App = () => {
        return (
            <h1>{process.env.API_URL}</h1>        
        );
    }
    export default App;

希望有帮助！

使用Dotenv和Webpack在React中使用env-vars

1 个答案: