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

所遇所思2024-11-25 13:05

在 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 来获取

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