vite的环境变量配置详解

Vite环境变量和模式

官方文档：https://cn.vitejs.dev/guide/env-and-mode.html

1、Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

2、Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

3、为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

除了以上几个比较重要的需要记住的点，其他的主要事项，或许要了解的地方大家可以直接查看官方文档！

环境变量配置实践

通过以上几个知识点的了解，我们就可以在项目的根目录分别创建一个.env.production和.env.development文件，分别用来存放打包时环境变量配置和开发时环境变量配置！

开发时环境变量为以下几个

# 本地环境
VITE_ENV = development

# 标题
VITE_APP_TITLE = Vue3Blog(DEV)

# 接口地址
VITE_APP_API_BASEURL = http://127.0.0.1:8000/api

# 本地端口
VITE_APP_PORT = 3000

# 是否开启代理
VITE_APP_PROXY = true

生产时环境变量为以下几个：