无法配置环境变量以在 React 应用程序中使用 cloudinary答案

【问题标题】：Can't configure env variables to use cloudinary in react app无法配置环境变量以在 React 应用程序中使用 cloudinary
【发布时间】：2023-02-03 12:56:52
【问题描述】：

我在我的 React 应用程序中遇到云配置问题。我安装了这个库并创建了一个像这样的 cloudinary 文件：

cloudinary.js

import { v2 as cloudinary } from 'cloudinary';
import * as dotenv from 'dotenv';
dotenv.config();

cloudinary.config({
    cloud_name: process.env.CLOUD_NAME,
    api_key: process.env.CLOUD_API_KEY,
    api_secret: process.env.CLOUD_API_SECRET,
    secure: true
});

export default cloudinary;

我的 .env 文件：

CLOUD_NAME=d*******c
CLOUD_API_KEY=8***********8
CLOUD_API_SECRET=j*************************A

我正在使用 netlify 进行部署。当我尝试在 import cloudinary from "..."; 的其他文件中使用 cloudinary 时，出现如下错误：

有人可以帮忙吗？提前致谢！

【问题讨论】：

您可以尝试在“站点设置”->“构建和部署”中添加环境设置，然后向下滚动到“环境”。此外，您可能需要在 React 应用程序中使用前缀 REACT_APP_XXXXX。

标签： reactjs netlify cloudinary dotenv

【解决方案1】：

这取决于您用于设置项目的内容。

如果是 CRA，则必须使用 REACT_APP_ 作为前缀，Reference
如果是Vite那么你必须使用import.meta.env.VITE_SOME_KEY加上VITE_作为前缀，Reference

【讨论】：