vue脚手架中的环境变量
项目根目录下常用的.env 、.env.local 、.env.dev等文件就是用来配置环境变量的。环境变量一般是用来判断不同的环境以便匹配/采用不同的配置文件。
webpack3和vite都是采用dotenv方式配置环境变量————从.env文件里面把定义的环境变量加载到process.env中。dotenv不是webpack和vite官方提供的插件。
dotenv库原理
- 用
fs.readFileSync读取.env文件，解析文件里的变量为键值对形式的对象，再将对象遍历赋值到process.env上。 dotenv源码使用的是flow类型
dotenv使用
- 环境变量写入
.env文件中
XXXX = xxxx
- nodejs 程序启动时运行：
require('dotenv').config() // 默认读取根目录下的.env文件
3.使用变量
process.env.XXXX
优先级(同时使用时覆盖情况)：.env.*.local > .env.* > .env
vue脚手架已经有了很多基础性的封装，无论是webpack还是vite都已经内置好了一些配置。可在根目录下新增/修改环境变量配置文件（改动配置文件请记得重启项目才生效）：
.env # 所有环境中载入
.env.local # 所有环境中载入，但被git忽略 （一般用于本地个人使用的配置文件，不会显示在git可提交代码列表里）
.env.[mode] # 只在指定模式中载入（一般.env.dev用于开发环境，.env.test用于测试环境，.env.prod用于生产环境）
.env.[mode].local # 只在指定模式中载入，但被git忽略 （一般用于本地个人使用的配置文件，不会显示在git可提交代码列表里）
使用环境变量
- 注意：环境变量只支持静态访问，如果值为变量/引用类型等不支持使用
webpack
- webpack直接用
process.env.xxx获取某变量 - 为了防止意外的泄露一些环境变量到客户端，vite会限制只有以
NODE_ENV、BASE_URL、VUE_APP开头的变量才能被客户端访问
vite
- 用
import.meta.env.xxx获取某变量 - 为了防止意外的泄露一些环境变量到客户端，vite会限制只有以
VITE_开头的变量才能被客户端访问
console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined
模式
默认情况下，dev命令运行在development（开发）模式，而build命令运行在production（生产/正式）模式。
若需要staging（预发布/预上线）模式，它会类似生产环境却又有些不同，可通过--mode选项标志来覆盖命令使用的默认模式，vite构建应用举例：
vite build --mode staging
匹配对应的.env.staging文件：
NODE_ENV = production
VITE_XXX = XXXX
