在 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 来获取
如果要在运行时改变环境变量,需要重新构建应用(重启服务器)