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
生产时环境变量为以下几个:</