Question

我想构建一个Nuxt.js应用程序，在这种情况下，我使用的是通过config生成的动态路由。

好吧，当我尝试使用Nuxt＆Firebase生成网页时遇到了一个问题。这是我的Nuxt Config JS代码：

Configuration

By default, Jenkins will listen on a random available port, so as not to break 
existing deployments. But this is most likely not very useful, so the administrator 
is encouraged to change this from the global security configuration page by assigning 
a fixed port. This configuration UI will also allow you to disable this feature.

它产生了如下错误：

import * as firebase from 'firebase';

import 'firebase/auth';
import 'firebase/database';

var firebaseConfig = {
  apiKey: "AIzaSyAOX6yNHPzWHWd30GnDagwlhgGv9iP8kLs",
  authDomain: "musthofa-lapor.firebaseapp.com",
  databaseURL: "https://musthofa-lapor.firebaseio.com",
  projectId: "musthofa-lapor",
  storageBucket: "musthofa-lapor.appspot.com",
  messagingSenderId: "653288691711",
  appId: "1:653288691711:web:e49daf72720bf99dc5f9ca",
  measurementId: "G-0KW7CGZHL3"
};

var app = firebase.initializeApp(firebaseConfig);
var dbx = app.database();


export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ],
    script:[
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js' },
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js' },
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js' },
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-storage.js' },
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  generate:{
    routes(){
      return dbx.ref('aspirasi').once("value",function(snap){
        snap.forEach(function(snapshot){
          var this_val = snapshot.val();
          return  {
            route: '/admin/balas/' + this_val.id
          }
        })
      })
    }
  }
}

任何帮助将不胜感激。非常感谢。

最好的问候

Answer 1

这是由于从null方法返回undefined或routes引起的，确实是这种情况。您的代码有两个问题：

您没有从回调函数返回值。
在forEach中使用return不会将值返回给调用方。 forEach的返回类型为undefined，因此应改用map。

routes(){
      return dbx.ref('aspirasi').once("value",function(snap){
        return snap.map(function(snapshot){
          var this_val = snapshot.val();
          return  {
            route: '/admin/balas/' + this_val.id
          }
        })
      })
    }

奖金：通过使用ES6语法和async / await，可以清理很多代码：

async routes() {
    const snapshot = await dbx.ref("aspirasi").once("value")
    return snapshot.map(snap => ({ route: "/admin/balas/" + snap.val().id }))
}

在Nuxt js中使用Firebase无法生成动态路由

1 个答案: