vite筆記記錄

 

 

 

 

 

 

 

 

 

 

 

配置文件分配及代碼規範: 見項目;

 

在vite中的环境变量的处理：

vite内置了dotenv这个第三方库。

dotenv会自动读取。env文件，并解析这个文件中的对应环境变量，并将其注入到process对象下，所以, .env文件中定义的环境变量可以在process中访问。

但是vite考虑到和其它配置的一些冲突问题，他不会直接注入到process对象下。

涉及到vite.config.js中的一些配置：

- root

- envDir : 用来配置当前环境变量的文件地址。

vite给我们提供了一些补偿措施，我們可以调用vite中的loadEnv手动确认env文件。

process。cwd方法： 返回当前node进程的工作目录。

 

-env： 所有环境都需要用到的环境变量

-env.development: 开发环境需要用到的环境变量（默认情况下vite将我们的开发环境取名为development）

-env.production: 生产环境需要用到的环境变量（默认情况下vite将我们的生产环境取名为production）

 

yarn dev --mode development会将mode设置为development传递进来

 

当我们调用loadenv的时候，他会做如下几件事：

1 直接找到.env文件不解释，并解析其中的环境变量，并放进一个对象里。

2 会将传进来的mode这个变量的值进行拼接： ''' .env.development ''',并根据我们提供的目录去取对应的配置文件并进行解析，并放进一个对象

3 我们可以理解为： 

　　''' js

　　const baseEnvConfig = 读取.env的配置

　　const modeEnvConfig = 读取env相关配置

　　const lastEnvConfig = {...baseEnvConfig, ...modeEnvConfig}

　　'''

如果是客户端，vite会将对应的环境变量注入到import.meta.env里面去

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