Я использую Vue cli для создания vue приложения с Firebase в качестве моего бэкэнда.
Файл в моем приложении инициализирует базу данных Firebase, ссылаясь на переменные окружения, определенные в .env
файлах.
.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().
, которое в основном говорит мне, что переменные среды не читаются в производственный режим.
Вот мой пакет. 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"
]
}
Может кто-нибудь сказать мне, что может быть причиной этого?