vue项目中中怎么获取环境变量

在 Vue 项目中，有几种获取环境变量的方法。最常用的是通过 import.meta.env 来访问。

1.首先在项目根目录创建环境变量文件：

.env                # 所有环境都会加载
.env.development    # 开发环境
.env.production     # 生产环境

2.在环境变量文件中定义变量（必须以 VITE_ 开头）：

VITE_API_URL=http://example.com
VITE_APP_TITLE=My App

3.在代码中使用：

// 获取环境变量
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// 获取当前模式
console.log(import.meta.env.MODE) // 'development' 或 'production'

// 判断是否是开发环境
console.log(import.meta.env.DEV) // true 或 false

注意事项：

只有以 VITE_ 开头的环境变量才会暴露给客户端代码 环境变量在构建时就会被静态替换，所以不能使用动态的 key 来获取

如果要在运行时改变环境变量，需要重新构建应用(重启服务器)