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>;

};
相关推荐
大莲芒7 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
Hellyc11 分钟前
SpringMVC响应数据:页面跳转与回写数据
java·前端·学习
CaveShao24 分钟前
前端开发中常见的 SEO 优化
前端·seo
Hyyy1 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试
Summer_Xu1 小时前
模拟 Koa 中间件机制与洋葱模型
前端·设计模式·node.js
李鸿耀1 小时前
📦 Rollup
前端·rollup.js
小kian1 小时前
vite安全漏洞deny解决方案
前端·vite
时物留影1 小时前
不写代码也能开发 API?试试这个组合!
前端·ai编程
试图感化富婆1 小时前
【uni-app】市面上的模板一堆?打开源码一看乱的一匹?教你如何定制适合自己的模板
前端
卖报的小行家_1 小时前
Vue3源码,响应式原理-数组
前端