我正在使用 Vue cli 创建一个以 Firebase 作为我的后端的 vue 应用程序。
我的应用程序中的一个文件通过引用 .env
文件中定义的环境变量来初始化 Firebase 数据库。
.env
FIREBASE_API_KEY=#################################
FIREBASE_AUTH_DOMAIN=#################################
FIREBASE_DB_URL=https://#################################
FIREBASE_PROJECT_ID=#################################
FIREBASE_STORAGE_BUCKET=#################################
FIREBASE_MESSAGING_SENDER_ID=#################################
AUTH_API=https://#################################
.env.development.local
和 .env.production.local
包含相同的数据。
在我的应用程序中,我有一个如下所示的文件:
凭证.js
导出默认值{
config: {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
databaseURL: process.env.VUE_APP_FIREBASE_DB_URL,
projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
}
当我使用 yarn serve
为该应用程序的开发版本提供服务时,数据库已初始化,因此显然可以毫无问题地读取 .env 变量。但是,当我使用 yarn build
然后在 dist
中提供生成的文件时,我在控制台上收到错误消息:
@firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp().
这基本上是在告诉我在生产模式下没有读取环境变量。
这是我的 package.json:
{
"name": "web-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@firebase/firestore": "^1.9.3",
"axios": "^0.19.0",
"core-js": "^3.3.2",
"element-ui": "^2.12.0",
"feather-icons": "^4.24.1",
"firebase": "^7.2.3",
"firebase-admin": "^8.9.2",
"firebase-functions": "^3.3.0",
"localforage": "^1.7.3",
"node-ipc": "^9.1.1",
"vue": "^2.6.10",
"vue-feather": "^1.0.0",
"vue-feather-icons": "^5.0.0",
"vue-router": "^3.1.3",
"vue2-animate": "^2.1.3",
"vuedraggable": "^2.23.2",
"vuefire": "^2.2.0",
"vuex": "^3.1.1",
"vuex-persist": "^2.1.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
谁能告诉我是什么原因造成的?
最佳答案
您需要在您的 .env
文件中为您的变量加上前缀 VUE_APP_
。
来自 https://cli.vuejs.org/guide/mode-and-env.html#environment-variables :
Note that only variables that start with
VUE_APP_
will be statically embedded into the client bundle withwebpack.DefinePlugin
.
关于firebase - vue App环境变量在开发模式下可以读取,生产模式下不能读取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60364181/