vite设置全局变量

环境变量挂载到全局

使用场景: api前缀添加到全局, 所有组件都可以直接使用

  1. 环境文件:
1
2
// .env
VITE_API_URL=https://xxx/api
  1. 挂载到全局window上:
1
2
// main.tsx
window.apiUrl = import.meta.env.VITE_API_URL
  1. 添加ts类型:
1
2
3
4
5
6
7
8
// vite-env.d.ts
// 第一行引入 Vite 中的客户端类型定义文件

/// <reference types="vite/client" />

interface Window {
  apiUrl: string;
}
  1. 使用:
1
axios.get(`${window.apiUrl}/students`)
build with Hugo, theme Stack, visits 0