React Vite 读取 ENV 变量和 firebase

Question

我有一个使用 Firebase / Firestore 的 React / VITE 项目。 我的问题是读取生产中的环境变量。 本地/开发模式一切正常。该项目构建没有错误。 以下是我在生产中看到的错误。 正如你所看到的，我正在记录

import.meta.env

以查看我们是否有 .env 变量。 我也尝试过其他相关的 Stack Overflow 文章。

这就是我到目前为止所做的事情。

1. 我确保变量按照 VITE 文档以 VITE_XX 开头这里
2. 我尝试用其他东西在

   envPrefix

   属性中定义前缀
3. 我尝试将

   envDir

   属性更改为

   /

   ，认为 VITE 不知道在哪里查找 .env 文件。 它直接默认为root。
4. 为了确保它不是我的服务器，我创建了一个没有 VITE 的空白 React 应用程序 (CRA)，并在根目录中添加了一个 .env 和一些变量，并将构建发送到生产环境，它可以很好地读取 .env 文件。 所以我有理由相信问题出在 VITE 配置而不是我的服务器上。
5. .env 文件位于项目的根目录中，而不是

   src

   目录中。
6. 我在

   console.log

   文件中添加了

   ./src/config/firebase.ts

   来验证变量是否被读入。看到所有变量都在本地读入，但没有在生产环境中读入。

这是我当前的

vite.config.ts

配置。 正如您所看到的，我已按照 VITE 文档中的建议更改为使用

process.env

而不是

import.meta.env

。 我也尝试了他们的方法但没有运气。 同样，这种方法可以在本地读取 .env 变量，但在任何情况下都不能在生产环境中读取。

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import dynamicImport from 'vite-plugin-dynamic-import'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        base: env.VITE_ROUTER_BASE_URL || '/',
        define: {
            'process.env': env,
        },
        envDir: './',
        plugins: [
            react({
                babel: {
                    plugins: ['babel-plugin-macros'],
                },
            }),
            dynamicImport(),
            tsconfigPaths(),
        ],
        assetsInclude: ['**/*.md'],
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src'),
            },
        },
        build: {
            outDir: 'build',
        },
    }
})

这是

./src/config/firebase.ts

文件

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

console.log('VITE VARS', process.env)

const app = initializeApp({
    apiKey: process.env.VITE_FIREBASE_API_KEY,
    authDomain: process.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: process.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.VITE_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.VITE_FIREBASE_APP_ID,
})

export const auth = getAuth(app)
export const firestore = getFirestore(app)

export default app

最后我的

.env

位于项目根目录中。

VITE_FIREBASE_API_KEY=xxx
VITE_FIREBASE_AUTH_DOMAIN=xxx
VITE_FIREBASE_PROJECT_ID=xxx
VITE_FIREBASE_STORAGE_BUCKET=xxx
VITE_FIREBASE_MESSAGE_SENDER_ID=xxxx
VITE_FIREBASE_APP_ID=1:xxxx

Answer 1

一切都按预期进行。事实证明，我的 GitHub CI/CD 管道没有上传所有必需的文件。如果您遇到此问题，请尝试手动上传文件。