将process.env与Vue和Vite一起使用时出错

Question

我正在用Vue、Vue路由器、Vite和Firebase编写一个web应用程序来处理身份验证。为了初始化Firebase应用程序，我使用.env并在firebase.js文件中获取Firebase变量(如VUE_APP_API_KEY、VUE_APP-AUTH_DOMAIN等)，我使用process.env.VUE_APP_MY_VARIABLE。然而，当我转到主页时，浏览器控制台中出现了一个错误。

以下是控制台中的错误：

未捕获引用错误：进程未在firebase.js:6:13 中定义

所以我尝试使用import.meta.env而不是process.env，但对于.env文件中的所有变量，它都会返回未定义的值。我也尝试过这样定义vite.config.js中的所有变量，但它仍然返回未定义的：

export default defineConfig({
plugins: [vue()],
define: {
"process.env.VUE_APP_MY_VARIABLE": process.env.VUE_APP_MY_VARIABLE
}
})

我确信我所有的变量确实都在.env文件中声明了，因为我的IDE为我提供了自动完成的好名字。毫无疑问，我已经尝试过用.env.local重命名.env文件，但它仍然是一样的。

这是我的firebase.js文件的代码：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
apiKey: process.env.VUE_APP_API_KEY,
authDomain: process.env.VUE_APP_AUTH_DOMAIN,
projectId: process.env.VUE_APP_PROJECT_ID,
storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
appId: process.env.VUE_APP_APP_ID
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
export { auth, db };

有人能帮我解决错误吗？

(附言：如果我的英语不完美，我道歉)

Answer 1

只有前缀为VITE_的变量才被公开。源

Vite使用import.meta.env

Answer 2

我在使用React和Vite时遇到了类似的问题。

我换掉了

apiKey: process.env.PUBLIC_API_KEY,

对于

apiKey: import.meta.env.VITE_PUBLIC_API_KEY

等等。

然后，我需要移动以确保我的.env.local文件在我的src文件夹中，并在.env.loal中重命名varables，当然是