(Nuxt.js) Ошибка Firebase при использовании Nuxt.js поверх Vue.js, но отлично работает с vanilla Vue.js - PullRequest
0 голосов
/ 03 апреля 2019

Я сделал сайт с чистым 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 я получаю эту ошибку ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...