跳到主要内容位置

如何在 Vite 2.0 项目中导入环境变量

峰华

环境变量是在开发中,用于设置可配置的信息。例如在前端开发中,我们可以配置 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 创建的项目中,定义和使用环境变量的方法,如果觉得本文有帮助,请帮忙分享给大家!谢谢!