vite环境变量配置

孩子气呵呵特2024-05-13 12:34

目前大多数项目都使用第三方库dotenv（vite中已内置dotenv）

dotenv会自动读取.env文件，并解析这个文件中的对应环境变量，并将其注入到process中，

js 复制代码

export default defineConfig(({ command, mode }) => {
  console.log("command", command);
  // 获取 env
  /**
   * mode：执行命令是npm run dev --mode development，代表dev环境
   * process.cwd(): 获取当前的目录
   * 第三个参数：指定读取那个env文件,默认为.env
   */
  // vite.config.js 会先读取.env文件，解析配置并把内容放到一个对象里
  /**
   * 若是执行的是dev环境，则会在把.env.development配置里的内容解析出来，放到对象中
   * 若是执行的是build环境，则会在把.env.production配置里的内容解析出来，放到对象中
   * 此对象里的内容会覆盖掉.env里获取到的对象内容
   */
  const env = loadEnv(mode, process.cwd(), "");
  //   console.log("env:", env);
  //  return envConfig[command]();
});

客户端获取.env里的变量

vite 会将对应的环境变量注入到import.meta.env里去，同时vite也做了一层拦截，会把.env中不是VITE开头的配置变量不暴露给客户端。

如.env 里配置 VITE_APP_KEY 就可读取出来。

若是用户不想使用VITE前缀去把配置暴露给客户端，也可以使用envPrefix在vite.config.js 中配置自定义的前缀

vite.config.js 配置

js 复制代码

import { defineConfig } from "vite";

export default defineConfig({
  envPrefix: "ENV_",
});

.env.development 配置

env 复制代码

ENV_APP_KEY: '120'

客户端通过import.meta.env 获取配置内容

js 复制代码

// 获取到 ENV_APP_KEY  120
console.log("import.meta.env:", import.meta.env);