如何让前端查看 .env 内容？

Question

我正在开发一个应用程序，它的客户端和服务器端托管在两个单独的 heroku 部署中。当我将 axios 调用中的 url 从前端硬编码到后端时，它可以在生产环境中工作：

auth.js 文件：

const baseUrl = 'https://url.herokuapp.com/'

function Auth() {
    axios.get(baseUrl + 'api/user', test)

但是，如果我将以下内容添加到 .env 文件并更改如下代码，则它不起作用：

auth.js 文件：

const baseUrl = process.env.REACT_APP_SERVER_URL || '/'

function Auth() {
    axios.get(baseUrl + 'api/user', test)

.env 文件：

if (process.env.NODE_ENV !== 'production') {
    REACT_APP_SERVER_URL = "http://localhost:3001/"
} else {
    REACT_APP_SERVER_URL = "https://url.herokuapp.com/"
}

我尝试在前端的路由 server.js 文件中添加和安装 dotenv，但现在运气不错

require('dotenv').config();

有什么想法吗？

Answer 1

.env 文件不是你可以写代码的 js 文件。它只是纯文本。

所以你可以像这样使用它：

.env

REACT_APP_SERVER_URL=http://example.com
NODE_ENV=production

然后你就可以阅读了。

require('dotenv').config();
console.log(process.env.NODE_ENV);
console.log(process.env.REACT_APP_SERVER_URL );
const baseUrl = process.env.REACT_APP_SERVER_URL || '/'
axios.get(baseUrl + 'api/user', test)

在本文档中，您可以找到如何通过 heroku config vars 应用环境变量。 https://devcenter.heroku.com/articles/config-vars