环境变量

• 在上一篇博客的基础上开发

• 环境变量处理

vite内置了dotenv这个第三方库
dotenv会自动读取.env文件, 并解析这个文件中的对应环境变量 并将其注入到process对象下(但是vite考虑到和其他配置的一些冲突问题, 他不会直接注入到process对象下)
 
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. 我们可以理解为
const baseEnvConfig = 读取.env的配置
const modeEnvConfig = 读取env相关配置
const lastEnvConfig = { ...baseEnvConfig, ...modeEnvConfig }

• 具体实现

• 项目根路径下新建.env，在该文件中编写配置

• 修改vite.config.js
  

• 测试

# 控制台输入命令
yarn dev
# 就可以获取到.env中的配置

• 新建.env.development

• 新建.env.production

• 测试

# 控制台输入命令
yarn dev --mode development
 
# 就可以拿到指定文件的中的配置
 
# 控制台输入命令
yarn build
# 同样可以获取到production中的配置

• 以上是在配置文件中获取环境配置，如下在客户端中获取环境配置

如果是客户端, vite会将对应的环境变量注入到import.meta.env里去
 
vite做了一个拦截, 他为了防止我们将隐私性的变量直接送进import.meta.env中, 所以他做了一层拦截, 如果你的环境变量不是以VITE开头的, 他就不会帮你注入到客户端中去, 如果我们想要更改这个前缀, 可以去使用envPrefix配置
 
补充一个小知识: 为什么vite.config.js可以书写成esmodule的形式, 这是因为vite他在读取这个vite.config.js的时候会率先node去解析文件语法, 如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范

• 具体实现

• 新建request.js
  

• 将外部文件挂到main.js
  

• 在.env文件中配置如下，必须以VITE开头，否则不能被读取到

VITE_APP_KEY = 110

• 自定义前缀，在vite.config.js中配置如下
  

# 自定义前缀后，修改.env文件
ENV_APP_KEY = 110
 
# 按照以上的方法启动项目即可

• 客户端中使用
  

• 新建1个测试环境测试

# 配置package.json
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vite --mode test"
  },
 
# 启动
yarn test