likes
comments
collection
share

初识vite环境变量

作者站长头像
站长
· 阅读数 41

基础定义

根据代码所处环境（比如我们经常听到的开发环境和生产环境）不同，有不同取值的变量即为环境变量

使用场景

当某段代码需要根据不同的环境执行不同的逻辑时，可以使用环境变量进行判断，不同环境下可以为同一个变量配置不同的值，然后可以利用流程控制语句（if，switch）决定执行的代码逻辑。当然了，也可以直接对一个变量进行赋值。

内容阐述

环境模式

vite默认有两种环境模式，分别是开发环境development和生产环境production，当然了，环境模式是可以自定义的，比如test，base,随你喜欢。但是你要定义相应的环境模式文件，vite才能去读取对应的环境变量，文件格式名为.env.{mode (环境模式名)}，比如.env.base，.env.test。

环境变量

在代码中，通过import.meta.env来获取环境变量，该字段是一个对象，每个属性都是一个环境变量。

vite中有五个内置自带的环境变量

  1. import.meta.env.MODE: 这个变量指的是当前 Vite 项目的环境模式。

  2. import.meta.env.BASE_URL: 这个变量主要用于设置网络请求接口的前缀。

  3. import.meta.env.DEV: 这是一个简单的布尔值，如果项目在开发模式下运行，它就会被设置为true。

  4. import.meta.env.PROD: 基本上与import.meta.env.DEV相反，如果项目在生产模式下运行，此变量为true。

  5. import.meta.env.SSR:布尔值， 是否是运行在server上。

==在不同的环境文件中获取变量，然后代码就会根据不同的环境模式获取到不同的值==

还可以自定义环境变量

自定义的环境变量必须以VITE_开头才能被正确识别为环境变量

环境变量的定义

环境变量必须定义在对应的环境文件内， 不同环境下会去对应的文件下寻找环境变量。

<!--.env.base-->



# 接口前缀
VITE_API_BASE_PATH='http://hos.taponce.cn:4005/api'

# 打包路径
VITE_BASE_PATH=/

# 标题
VITE_APP_TITLE="进销存系统"



<!--.env.pro-->



# 接口前缀
VITE_API_BASE_PATH='http://hos.tap.cn:4005/api'

# 打包路径
VITE_BASE_PATH=/hello/
#  VITE_BASE_PATH= ./


# 是否删除console.log
VITE_DROP_CONSOLE=true

# 是否sourcemap
VITE_SOURCEMAP=false

# 输出路径
VITE_OUT_DIR=dist-pro

# 标题
VITE_APP_TITLE="进销存系统"

#使用使用mock
VITE_ENABLE_MOCK=true

具体应用

其中一种应用场景是在package.json定义的执行脚本中，为执行脚本添加指定环境模式，那么执行脚本时运行代码需要读取环境变量时，就会去对应的环境变量定义文件；里去查找：

"script":{
    "dev": "pnpm vite --mode base --open",
    "build:pro": "pnpm vite build --mode pro",
}

  • 以上述代码为例，我们在dev指令中添加了--mode base，意味着项目是在base环境下运行，会去.env.base文件寻找环境变量。

  • 因为我们在本地开发运行代码，默认情况下 是开发环境development，，当然上面的示例代码就是使用自定义环境模式为base，

以base环境为例，当代码运行到需要使用环境变量的时候，比如

if(import.meta.env.MODE==='base'){
   .....
}else {
    
}

<!--或者使用自定义环境变量-->
<!--使用场景比较多的就是网络接口前缀在不同环境可能会是不同的-->

baseUrl = import.meta.env.VITE_API_BASE_PATH
//如果是base，那么值就会为 'http://hos.tap.cn/api'，
<!--如果是pro环境，则值就会为'http://hos.tap.cn:4005/api'-->

结语

本文是对Vite环境变量的一个大致讲解，环境变量还有许多高级的用途，本文不一一讲述了。 本人刚开始写学习文章，如有错误或不足之处，被各位朋友看到了，还请指正！

转载自:https://juejin.cn/post/7367644434982567974
评论
请登录