我正在用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 };
有人能帮我解决错误吗?
(附言:如果我的英语不完美,我道歉)
只有前缀为VITE_
的变量才被公开。源
Vite使用import.meta.env
我在使用React和Vite时遇到了类似的问题。
我换掉了
apiKey: process.env.PUBLIC_API_KEY,
对于
apiKey: import.meta.env.VITE_PUBLIC_API_KEY
等等。
然后,我需要移动以确保我的.env.local文件在我的src文件夹中,并在.env.loal中重命名varables,当然是