我有一个使用 Firebase / Firestore 的 React / VITE 项目。 我的问题是在 producting 中读取环境变量。 一切都在本地/开发模式下运行良好。 此项目在构建时没有错误。 下面是我在生产过程中看到的错误。 您可以看到我正在记录 < code> import.meta.env 来查看我们是否有. env 变量。 我还尝试了其他相关的 Stack overflow 文章 。

这正是我为这一点所做的。

1. I made sure the variables start with VITE_XX as per VITE S documentation here
2. I tried defining the prefix in the envPrefix property with something else
3. I tried changing the envDir property to / thinking VITE didn t know where to look for the .env file. It defaults to the root directly soooo.
4. To make sure it wasn t my server, I created a blank React app (CRA) without VITE and added a .env to the root with some variables and sent the build to production and it read the .env file fine. So I have reason to believe the issue is with VITE configuration and not my server.
5. .env file is located in the root of the project NOT the src directory.
6. I added a console.log in the ./src/config/firebase.ts file to verify the variables are getting read in. Seeing all variables read in locally but not production.

这里的是我的当前 vite. config.ts config.ts config。 正如您所看到的,我做了一些修改,以便使用 process.env ,而不是VITE s docs 中建议的 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