04 Vite 为什么需要环境变量

前言

1. 环境变量：是可以根据项目运行的环境不同而变化的变量
2. 前端项目的运行环境常见的有如下几种：

1. 1. 开发环境
   2. 测试环境
   3. 预发布环境
   4. 灰度环境
   5. 生产环境

什么是运行环境呢

1. 前端环境有很多，比如浏览器环境，服务器环境，网络环境等，我们这里特指项目所处的服务器
2. 不同的服务器会对应不同的ip或端口，那么我们在浏览器端访问不同的ip和端口就可以访问到互相隔离的前端项目
3. 而针对每个隔离的前端运行环境，我们可以给其取名，常见的就是上述几类

环境变量的作用

1. 根据不同的环境设置不同的后端接口地址，比如我们开发环境肯定不能访问和修改线上环境的数据
2. 根据不同的环境设置不同的构建配置，开发和生产环境构建配置肯定不同，比如开发环境我们需要开启源码映射方便调试，但是生产环境肯定不能开启，防止别人调试
3. vite借助dotenv库在构建前，自动读取我们的.env文件，解析文件内容，并注入到process.env中，process是服务端的一个全局变量。

Vite中如何配置环境变量

手动配置环境变量

1. 接着上篇文章中的项目，我们新建一个.env文件来设置环境变量，如下
   
2. 除了.env文件外，还可以配置.env.development，.env.production文件，这三种文件名是默认可识别的，分别为通用环境变量，开发环境变量，生产环境变量
3. Vite是借助dotEnv这个库来读取环境变量的。

服务端获取环境变量

1. 项目构建时是运行在服务端环境下的，所以dotEnv需要将环境变量挂在到服务端的全局变量中，node中是process.env。我们通过读取这个process.env对象来获取环境变量，如下
   
2. 可以看到输出结果中并没有我们环境变量中设置的_API_PREFIX，但是有我们直接访问process.env设置的_My变量。
3. 这是因为在服务端中我们获取环境变量，vite默认不会注入，需要我们自己调用方法loadEnv来注入，因为vite.config.js中是可以配置dotEnv库的行为的。但是我们又需要在vite.config.js执行前获取环境变量，这就容易产生冲突，比如在获取之后发现修改了dotEnv的配置。
4. 因此，我们手动导入vite提供的loadEnv方法，并手动加载环境变量，进行一些定制化操作，如下
   
5. 观察结果可以看出，这样是可以获取到环境变量的，同时loadEnv还有一些配置项可以修改环境变量默认的那三种文件名，以及环境变量读取的位置等

客户端获取环境变量

1. 除了服务端外，在客户端中我们也需要读取环境变量，比如API_PREFIX，用于设置不同环境请求的接口的公共前缀
2. 客户端中，vite会将环境变量注入import.meta.env中，方便我们获取，如下
   
3. 观察浏览器的输出结果，如下
   
4. 并没有我们刚添加的_TITLE变量，这是因为vite为了保护我们的环境变量不会意外暴露，除了内建的环境变量如图中所示的那几个外，我们自定义的环境变量必须以VITE_开头才会暴露，在我们的变量前加VITE_，如下
   
5. 通过vite.config.js我们也可以配置这个默认暴露的前缀，如下
   
6. 运行结果依然有效，如下