vue环境变量与dotenv

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开头的变量才能被客户端访问
用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
复制代码