如何在 Vite 2.0 项目中导入环境变量
2021年11月 · 预计阅读时间: 2 分钟
环境变量是在开发中,用于设置可配置的信息。例如在前端开发中,我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量,这篇文章我们来看一下如何在 Vite 2.0 创建的项目中,创建和导入环境变量。
Vite 2.0 创建的项目中,默认有下面 4 个默认的环境变量:
import.meta.env.MODE
- 当前运行环境,在开发模式下为development
,例如通过yarn dev
运行项目,在产品模式下为production
, 例如使用yarn serve
运行项目。import.meta.env.BASE_URL
- 项目的 URL 跟路径,默认为/
。import.meta.env.PROD
- 判断是否为生产环境,在开发模式下为false
,在产品模式下为true
。import.meta.env.DEV
- 判断是否为开发环境,在开发模式下为true
,在产品模式下为false
。
这几个环境变量可以直接在 Vite 2.0 项目代码中使用,例如打印出来:
console.log(import.meta.env.MODE); // development
添加环境变量
Vite 2.0 默认使用 dotenv
来加载自定义的环境变量,它支持加载 .env
文件中定义的环境变量,我们来看一下怎么实现。这里以 Vite 2.0 创建的 Vue 项目为例,在项目的根目录下,创建一个 .env
文件:
├── .env # 环境变量文件
├── index.html
├── package.json
├── public
├── src
└── vite.config.js
.env
文件里边的内容是键值对形式的,=
左边是环境变量的名字,右边是环境变量的值,例如我们定义一个 VITE_END_POINT
环境变量,保存后端的 API 地址:
VITE_END_POINT=http://localhost:8080
之后,我们可以在任意 Vue 组件中,通过 import.meta.env.环境 变量名
来使用环境变量,例如:
<script setup>
console.log(import.meta.env.VITE_END_POINT);
</script>
这里会在浏览器控制台中打印出 http://localhost:8080
。
环境变量的 VITE_
前缀是必须的,这样才能在客户端 JS 代码中使用,如果不加前缀,那么只能在服务端使用,例如下方的 API_SECRET
环境变量,是不能在组件代码中访问到的:
API_SECRET=123456
VITE_END_POINT=http://localhost:8080
暴露给客户端的环境变量,因为可以直接在浏览器中看到,所以不要包含敏感信息,例如密码、API 密钥等。
根据开发环境设置环境变量
.env
中的环境变量,默认在开发和产品环境下都会加载,不过 Vite 2.0 还支持按开发环境来加载对应的 .env
文件,只需要在 .env
文件名后面加上后缀,例如:
.env.local
,在所有环境下加载,但会被 git 忽略。.env.[mode]
,只在特定环境下加载,例如.env.development
只在开发环境下加载,.env.production
只在生产环境下加载。.env.[mode].local
,和.env.[mode]
类似,但是会被 git 忽略。
小结
好了,这个就是在 Vite 2.0 创建的项目中,定义和使用环境变量的方法,如果觉得本文有帮助,请帮忙分享给大家!谢谢!