对于我的React应用程序，我使用Google Maps API密钥作为组件，以及邮件发送库。
邮件发送所需的API密钥和密码是敏感数据，不能存储在简单变量中。
在生产模式下，为了保护这些敏感变量，我在“public_html”文件夹外创建了一个名为“other”的文件夹。
在这个“其他”文件夹中，我创建了一个名为“.env”的文件，其中包含我的各种变量，所有变量都以“REACT_APP_”开头。
为了在我的代码中访问这些变量，我导航到“other”文件夹，并使用命令访问.env文件：
require('dotenv').config({ path: '../other/.env' });
然后我应该可以得到我的变量：
const ww = process.env.REACT_APP_COCO
但是，当我运行npm run build**命令在生产环境中部署应用程序时，我得到了以下错误：
“重大变化：webpack〈5曾经默认为node.js核心模块包含polyfill。现在不再是这样了。请验证是否需要此模块并为其配置polyfill。如果要包含polyfill，需要：- 添加回退'resolve.回退：{“os”：require.resolve（“os-browserify/browser”）}' - install 'os-browserify'如果你不想包含一个多边形填充，你可以使用一个空模块，如下所示：resolve.fallback:产品中心

我修改了webpack.config.js文件，特别是resolve.fallback，将path等设置为false，但没有任何效果。

所以，我决定通过创建一个新的应用程序来简化

• 使用“npx create-react-app nameofmyapp”，
• 使用“npm install dotenv”安装“dotenv”，
• 并在我的应用程序的根目录（即与“public”文件夹相同的级别）创建带有我的变量“REACT_APP_COCO=8”的.env文件。
• 然后，在我的Home组件中，我使用“REACT_APP_COCO”访问我的变量：

import React from 'react'

const Home = () => {
  return (
    <div>
      {process.env.REACT_APP_COCO}
    </div>
          )
     }
export default Home

此时，我没有webpack问题或错误，并且显示值8。
当我想在我的主机服务器上托管此应用程序时出现问题。

因此，我添加了一个条件来区分开发环境和生产环境

import React from 'react'

if(process.env.NODE_ENV==='production'){
  require('dotenv').config({ path: '../other/.env' });
}
const Home = () => {
  return (
    <div>
       {process.env.REACT_APP_COCO}
    </div>
  )
}

export default Home

我运行了“npm run build”命令，得到了错误：
“编译失败。找不到模块：错误：无法解析......./node_modules/dotenv/lib”中的'fs'。
我运行了npm install dotenv@latest，但我仍然收到了关于为“os”模块包含一个polyfill的消息。
然后我尝试修改webpack.config.js文件，代码如下：

module.exports = {
// ...
resolve: {
fallback: {
"fs": false,
"os": false,
"path":false
},
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
};

但我还是得到了同样的错误。我已经搜索了三个多小时的解决方案，但我找不到一个。这是一个阻塞问题，因为我需要访问包含我的.env文件的“其他”文件夹，该文件包含我使用谷歌Map所需的API密钥。我已经尽可能地简化了问题，以便您可以有效地帮助我。我热切地等待您的建议，因为我被卡住了，找不到解决办法。
Drarig 29解决方案=〉
我做了什么：

const Dotenv = require('dotenv-webpack');
module.exports = {
    resolve: {
        fallback: {
        "fs": false,
        "os": false,
        "path":false
        },
        },
  // ...

  plugins: [
    new Dotenv({
        path: process.env.NODE_ENV === 'production' ? '../other/.env' : '.env',
    })
  ],
};

现在的问题是，在生产环境中，它读取的.env文件位于我的应用程序的根目录，而不是服务器的“其他”文件夹中的.env文件。