vite 中如何读取环境变量？

蓝瑟

已于 2024-01-11 23:22:29 修改

阅读量2.6k

点赞数 18

CC 4.0 BY-SA版权

文章标签： react.js 前端 javascript

于 2024-01-11 23:13:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44545357/article/details/135541169

本文介绍了如何在Vite项目中使用.env文件来存储环境变量，如VITE_APP_TITLE，并在vite.config.ts中读取它们。同时，提到在TypeScript项目中处理import.meta.env以避免编译错误的方法，包括全局类型定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有如下 .env 文件

VITE_APP_TITLE=MyApp

在 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({
    // 你的配置...
  });
};

你可以在你的客户端 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;
}