vite 中如何读取环境变量？

有如下 .env 文件

VITE_APP_TITLE=MyApp

1. 在 vite.config.ts 中，读取 VITE_APP_TITLE

import { defineConfig, loadEnv } from 'vite'

export default ({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '') || {}
  console.log(env.VITE_APP_TITLE); // 你应该能看到你的环境变量值

  return defineConfig({
    // 你的配置...
  });
};

2. 你可以在你的客户端 JavaScript 或 TypeScript 代码中这样使用：

if (import.meta.env.VITE_APP_TITLE) {
  console.log(import.meta.env.VITE_APP_TITLE)
}

为了避免 TypeScript 编译错误，你可能需要在全局类型定义文件（例如 src/env.d.ts）中添加以下代码：

interface ImportMetaEnv {
  readonly VITE_APP_TITLE?: string;
  // 和其他环境变量
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}