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