1

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

我有以下设置：

  • React + NodeJS（我不使用create-react-app）
  • 网络包 4
  • 多腾夫

我试图关注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，当然我已经在位于项目根目录的 -file 中定义REACT_APP_MY_VAR了.env。

上面我希望file.js渲染 的值REACT_APP_MY_VAR，但我没有渲染任何东西，无论是值还是错误。

4

1 回答 1

3

我建议使用dotenv-webpack而不是dotenv包以便于配置。

4个简单的步骤：-

1）安装dotenv-wepack使用

npm install dotenv-webpack --save

.env2）在应用程序的根目录创建文件

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;

希望有帮助！！！

于 2019-08-26T12:32:26.863 回答