Я сделал сайт с чистым Vue.js, все отлично работает.
Однако я перенес проект в Nuxt.js, после настройки «всего», я получаю эту ошибку на странице разработки:
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
Вот файл firebase ('fb.js'), который я использовал для экспорта базы данных:
"fb.js" (корневая папка)
import firebase from 'firebase/app';
import 'firebase/firestore'
// Initialize Firebase
var config = {
apiKey: "KEY",
authDomain: "DOMAIN",
databaseURL: "DBURL",
projectId: "PID",
storageBucket: "SBUCKET",
messagingSenderId: "MSID"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots: true})
export default db;
"component.vue" (папка Components) * Этот код не совсем совпадает с моими файлами, но ключевые части здесь
<template>
<div class="allprojects" v-for="(project, key) in projects" :key="key">
<span> {{project.title}} </span>
<span> {{project.person}} </span>
<span> {{project.due_date}} </span>
<span> {{project.status}} </span>
</div>
</template>
<script>
import db from '@/fb.js';
export default {
data() {
return {
projects: []
},
created() {
db.collection('projects').onSnapshot(res => {
const changes = res.docChanges();
changes.forEach(change => {
if (change.type === 'added') {
this.projects.push({
...change.doc.data(),
id: change.doc.id
})
}
}
</script>
"package.json" (Nuxt.js)
{
"name": "web",
"version": "1.0.0",
"description": "Nuxt.js + Vuetify.js project",
"author": "Alexsander Bispo <35003248+Lexszin@users.noreply.github.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"date-fns": "^1.30.1",
"firebase": "^5.9.2",
"nuxt": "^2.2.0",
"vuetify": "^1.3.6",
"vuetify-loader": "^1.0.5"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-transform-imports": "^1.5.1",
"eslint-config-standard": "^12.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
},
"main": ".eslintrc.js",
"license": "ISC"
}
"package.json" (Vue.js)
{
"name": "tify",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"date-fns": "^1.30.1",
"firebase": "^5.9.2",
"vue": "^2.6.6",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"postcss": "^7.0.14",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.5.8",
"vuetify-loader": "^1.0.5"
},
"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",
"not ie <= 8"
]
}
Как уже упоминалось в заголовке, это отлично работает с vanilla Vue.js, но при сборке с Nuxt.js я получаю эту ошибку ...