vite学习之环境变量

前言

前面一章简单简绍了什么是构建工具以及vite的依赖预构建,如果感兴趣的可以去看看哦原文地址,这章就讲一讲vite的环境变量的处理，以及环境变量的使用以及配置

什么是环境变量呢？

这个问题在我刚学前端的时候也困扰着我，我不知道什么是生产环境，什么是开发环境还有测试环境。这堆关键名词就绕的脑壳晕，也只能跟着教程或者视频，他们怎么写我也就怎么写。

首先我举一个简单的例子吧，比如说配置axios的BaseUrl,当我们在我们自己电脑开发的时候，我们需要填写例如"http:localhost:8088/" 这样的地址上去,当如果我们的项目打包了，准备上线到服务器上面,那我们向后端发送请求的地址肯定也是需要改变的,不可能还是"http://localhost:8088/", 否则就拿不到数据了,所以我们就需要在打包完成前把这个地址改为我们线上后端api的地址,这个时候有两个方法来修改这个地址，第一个就是手动一个一个的修改，第二个方式就环境变量。环境变量到底是什么意思呢，顾名思义也就是字面意思，根据环境改变而变化的变量就是环境变量。

vite中的环境变量

首先环境变量又分为两类 第一个就是在特定环境下改变的变量，通常我们创建不同的文件来区分比如在生产环境的环境变量用文件 .env.production.js来存放，开发环境用.env.development.js来存放。 第二个就是公共的环境变量，用.env文件来存放

vite内置了dotenv的这个包，在我们敲下命令的时候会根据不同的环境自动的读取到不一样的文件,但是他会始终读取.env的文件不论环境，然后他将读取到的文件解析成对象的形式

  let BaseConfig={
    BaseUrl:"xxxx"
  }

在客户端的时候会将根据vite的配置文件,过滤出特定的环境变量 默认是以 VITE_ 开头的环境变量，并将其注入到import.mate.env里面去 当然在读取文件的时候也有优先级的读取，当是在特定的环境的时候优先读取特定的环境变量文件，后读取.env文件，如果.env文件的变量有与与之前的环境变量冲突，之前的环境变量不会被覆盖

  VITE_URl = "xxxx" //在vite.development.js里面

  //此后在vue的代码中可以通过import.mate.env中访问
  console.log(import.mate.env.VITE_url) //"xxxx"

vite做了一个拦截，他为了防止我们将隐私性的变量直接送进import.meta.env中，所以他做了一层拦截，如果你的环境变量不是以VITE开头的，他就不会帮你、注入到客户端中去，如果我们想要更改这个前缀，可以去使用envPrefix配置

此后在客户端如果想访问的环境变量必须要以 XXK_ 开头来定义，默认是 VITE_

结尾

vite的环境变量的学习让我对vite的了解更加深入,对环境变量的认识也更加深刻，希望这篇文章对你又所帮助,给一个免费的赞吧。 原文地址链接(康的个人博客 (xxkbolg.top))