在vite中,如何省略VITE_这样的前缀来创建一些自定义的环境变量

发布时间 2023-03-24 16:46:39作者: lei-17

1.vite自带的属性envPrefix

这个属性只能修改掉VITE_这样的开头,并且不能为空

详情参考

 

 2.使用dotenv插件

如果你不想被这些瓶瓶罐罐约束,想定义什么变量就定义什么变量的话

那你可以尝试使用dotenv这个插件

dotenv:npm 官方文档的这样介绍 dotenv: Dotenv 是一个零依赖的模块,它能将环境变量中的变量从 .env 文件加载到 process.env 中

首先安装依赖

npm install dotenv

然后在vite.config.ts里面导入:

import dotenv from "dotenv"
 
然后调用dotenv.config() 这个方法会默认读取.env文件,并将里面的环境变量加载到process.env上,如果你想读取其他环境的文件比如开发环境,你就可以像下面这样传入一个path属性指定对应的env文件,
devENV就是返回的环境变量的对象,你可以通过这个方法读取多个环境变量的文件,
 
let devEnv = dotenv.config({ path: ".env.development" }) //读取文件,并将环境变量挂载到process.env
let proEnv = dotenv.config({ path: ".env.production" }) //读取文件,并将环境变量挂载到process.env
 
这样不管你在环境文件中定义了什么样的变量都可以读取到了;比如下面这些变量

LEI_NAME = 'diaoyulao'
VITE_API="111.com"

通过process.env.LEI_NAME,process.env.VITE_API都能顺利读取到变量,但是只限在vite.config.ts里面

 

最后如果你想在全局使用这些变量还需要在vite.config.ts里面做多一步,像下面这样将你拿到的环境变量对象devEnv,通过define这个属性挂载在全局环境中,那么你可以在任意地方输出DEVDATA

export default defineConfig({
  define: { DEVDATA: devEnv, PRODATA: proEnv }, //全局挂载
})