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

一、Vite 环境变量基础

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

bash 复制代码
VITE_API_URL = "http://localhost:3000/api"

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

bash 复制代码
VITE_API_URL = "https://production-api-url.com/api"

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

使用 import.meta.env

javascript 复制代码
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>;

};
相关推荐
小小小小宇1 分钟前
前端实现合并两个已排序链表
前端
yngsqq19 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk22 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan24 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE27 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年29 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能40 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房40 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃41 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂1 小时前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript