当前位置: 首页 > article >正文

react + vite 中的环境变量怎么获取

一、Vite 环境变量基础

创建一个`.env`文件,Vite 定义的环境变量需要以`VITE_`开头。

VITE_API_URL = "http://localhost:3000/api"

生产模式创建`.env.production`。

VITE_API_URL = "https://production-api-url.com/api"

二、在 React 组件中获取环境变量

使用 import.meta.env

import { useEffect, useState } from "react";



const MyComponent = () => {

  const [data, setData] = useState(null);

  useEffect(() => {

    const fetchData = async () => {

      const response = await fetch(import.meta.env.VITE_API_URL);

      const result = await response.json();

      setData(result);

    };

    fetchData();

  }, []);



  return <div>{data && <p>{data.message}</p>}</div>;

};


http://www.kler.cn/a/415337.html

相关文章:

  • 【代码随想录day44】【C++复健】1143.最长公共子序列;1035.不相交的线;53. 最大子序和;392. 判断子序列
  • 数据结构--树二叉树顺序结构存储的二叉树(堆)
  • Vue.js当中v-if和v-show的区别
  • [Python/网络安全] Git漏洞之Githack工具基本安装及使用详析
  • UWB数字钥匙安全测距和场景应用
  • Unity ShaderLab 实现网格爆炸
  • 网络安全中的数据科学如何重新定义安全实践?
  • 嵌入式开发之Bootloader移植(一)
  • 在更改文件名字关于PermissionError: [WinError 5] 拒绝访问。
  • DeepSpeed框架配置解析:一份详细的日志分析
  • 电子应用设计方案-30:智能扫地机器人系统方案设计
  • 18. 【.NET 8 实战--孢子记账--从单体到微服务】--记账模块--账本
  • eBay 基于 Celeborn RESTful API 进行自动化工具集成实践
  • Flink四大基石之CheckPoint
  • 计算机网络:数据链路层(二)
  • Milvus×Florence:一文读懂如何构建多任务视觉模型
  • 矩阵重构——reshape函数
  • Vue 3 组件通信教程
  • 不同云计算网络安全等级
  • HTTPTomcatServlet
  • Node报错:npm error code ETIMEDOUT
  • 智能合约开发框架--Hardhat
  • 电商数据采集电商行业数据分析电商平台数据获取|保障稳定的API接口数据
  • 如何在CodeIgniter中调用构造函数
  • DataOps 体系对企业数据管理价值及落地的探讨
  • 合并视频文件:使用Python和MoviePy库的简单指南