Vite笔记之06-vite环境变量处理

1. 创建文件目录

./
├─.env
├─.env.development
├─.env.production
├─.env.test
├─index.html
├─main.js
├─package.json
├─request.js
├─vite.base.config.js
├─vite.config.js
├─vite.dev.config.js
├─vite.prod.config.js
├─yarn.lock

vite.config.js

import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";

// 使用函数可以打印日志
const envResolver = {
  build: () => {
    console.log("生产环境");
    return { ...viteBaseConfig, ...viteProdConfig };
  },
  serve: () => {
    console.log("开发环境");
    return Object.assign({}, viteBaseConfig, viteDevConfig); // 新配置可能会被配置envDir 之前的有什么作用？ 可能为.envA
  },
};
// command : serve | build  mode: development | production
export default defineConfig(({ command, mode }) => {
  // console.log(command, mode, process.cwd());// process.cwd()也可以写成路径
  // console.log(process.env);
  const env = loadEnv(mode, process.cwd(), ""); // 第三个参数默认是空   VITE_找出VITE_开头
  console.log("打印***env", env);
  // 此时才能读取环境变量
  return envResolver[command]();
});

2. 什么是环境变量

环境变量：根据当前代码环境产生值的变化的变量叫环境变量

代码环境：

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

举例：百度地图sdk， 小程序的sdk

APP_KEY： 环境不同值不同

• 开发 110
• 生产 111
• 测试 112

需要环境变量 设置.env文件,

vite中设置环境变量，使用dotenv第三方库，默认会读取.env文件，并解析这个文件中的环境变量，进行=分割，注入到process对象下。

设计vite.config.js配置 会影响env环境变量的配置

• root
• envDir 用来配置当前环境变量的文件地址

.env: 所有环境都用到的

.env.development: 开发环境用到的 默认命名可以修改

.env.production: 生产环境用到的 默认命名可以修改

yarn dev —mode development 会将开发环境设置为development，可以不用写默认指定, 也可以—mode test 则vite.config.js中mode就是test，对应.env.test

服务端区分环境 就是在vite.config.js中使用loadEnv

当调用loadEnv时候会读取两个配置文件：

1. 直接找到.env文件，放入一个对象中
2. 会将环境对象的值进行拼接，并根据提供的目录取对应的配置文件并进行解析，并放进一个对象
3. 会覆盖.env 执行{ …baseEnvConfig, …modeEnvConfig }

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

process.cwd方法:返回当前进程的工作目录，就是命令运行的目录

3. 客户端区分环境

Vite会将对应的环境变量注入到import.meta.env中去,vite做了一层拦截，防止将隐私的变量直接送入import.meta.env中，需要以VITE开头，否则不会放在客户端中。如果想要更改这个前缀，可以使用envPrefix配置

补充一个知识点：

为什么vite.config.js可以书写成esmodule的形式，运行在node环境中，这是因为vite读取vite.config.js,会先用node进行解析文件，如果是esm会直接将esm进行替换，变成commonjs规范。