如何让我的 Ionic/React 应用程序读取/加载我的 .env 文件？-解网

问：

我正在使用 Ionic 7、React 18 和包含的 dotenv 16.3。我创建了一个空白的离子应用程序，并在package.json（.env）旁边添加了一个文件

NODE_ENV=local
REACT_APP_BASE_URL=http://localhost:3000

我还创建了一个文件src/services.api.ts，其中包含

$ cat src/services/api.ts 
import axios from "axios";

const api = axios.create({
 baseURL: process.env.REACT_APP_BASE_URL,
});

但是，尝试加载此文件会导致

Uncaught ReferenceError: process is not defined
    <anonymous> api.ts:4

使用启动应用程序后访问应用程序时出错

ionic serve

我还需要做些什么才能让离子读取我的 .env 文件？

reactjs npm ionic-framework dotenv ionic7

“包括 Dotenv 16.3”如何？您可能正在客户端运行，例如 CRA（不仅仅是一般的 React）这样做的方式是使用 Webpack 将源代码中的文字外观替换为相关值 - 你有类似的东西设置吗？位于 Node.js API 中，但该代码未在 Node 中运行。api.tsprocess.env.REACT_APP_VARprocess

答：

1赞 R0l 10/26/2023 #1

我假设您正在使用 Vite 来构建您的应用程序。 Vite 不使用 Webpack，因此，通常的 Webpack 全局变量（如 process）在默认情况下不可用。

Vite 在特殊对象上公开了 env 变量。import.meta.env

以下是他们的详细说明： https://vitejs.dev/guide/env-and-mode.html

如何让我的 Ionic/React 应用程序读取/加载我的 .env 文件？

How do I get my Ionic/React app to read/load my .env file?

评论

评论