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

2021年11月 · 预计阅读时间： 2 分钟

软件工程师 / B站UP主

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