Vite+Vue3+Firebase项目环境变量配置失效问题求助

核心问题原因 #

Vite不支持process.env（这是Webpack的环境变量方式），且要求暴露给客户端的环境变量必须以VITE_为前缀，否则不会被注入到项目中。

正确配置步骤 #

1. 创建环境变量文件
   在项目根目录创建.env文件（本地开发推荐用.env.local，不同环境可对应使用.env.development/.env.production），写入Firebase配置，变量名必须以VITE_开头：

VITE_FIREBASE_API_KEY=你的Firebase API Key
VITE_FIREBASE_AUTH_DOMAIN=你的Firebase Auth Domain
VITE_FIREBASE_PROJECT_ID=你的Firebase Project ID
VITE_FIREBASE_STORAGE_BUCKET=你的Firebase Storage Bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=你的Firebase Messaging Sender ID
VITE_FIREBASE_APP_ID=你的Firebase App ID

2. 修改Firebase初始化代码
   在firebaseInit.js中，将process.env替换为import.meta.env，同时加上VITE_前缀：

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
}

const appFirebase = initializeApp(firebaseConfig);

export default appFirebase;

3. 重启开发服务
   Vite不会热更新环境变量，修改.env文件后必须停止当前开发服务，重新执行npm run dev才能让新的环境变量生效。

可选：添加TypeScript类型提示 #

如果项目使用TypeScript，在src目录下创建env.d.ts文件，获得环境变量的类型提示：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_FIREBASE_API_KEY: string;
  readonly VITE_FIREBASE_AUTH_DOMAIN: string;
  readonly VITE_FIREBASE_PROJECT_ID: string;
  readonly VITE_FIREBASE_STORAGE_BUCKET: string;
  readonly VITE_FIREBASE_MESSAGING_SENDER_ID: string;
  readonly VITE_FIREBASE_APP_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

内容的提问来源于stack exchange，提问作者Jose Navarrete del Rosario