NuxtJS动态路由SSR

问题描述 投票:0回答:1

SSR无法使用NuxtJS中的动态路由(_id.vue文件),我正在使用asyncData函数在服务器端呈现数据库中的动态值,它正在开发模式下工作,但生成静态项目后,服务器端不会呈现任何内容,包括具有静态值的HTML标记。

_ id.vue

<template>
  <v-app>
            <h3 class="typo-title3">Localização</h3>
            <p
              class="address"
            >{{data.nome | capitalize}} está localizado no bairro {{data.bairro | capitalize}}, {{data.rua | capitalize}}, {{data.num}}, na cidade de {{data.cidade | capitalize}}.</p>
  </v-app>
</template>

<script>
import fsAct from "@/functions/fsAct";
import firebase from "~/assets/js/firebase";

export default {
  mixins: [fsAct],
  data() {
    return {
      id: this.$route.params.id,
      data: {
        fachada: ""
      }
    };
  },
  /* SSR */
  async asyncData({ route, params }) {
    const ref = firebase
      .firestore()
      .collection("example")
      .doc(params.id);
    let snap;
    try {
      snap = await ref.get();
    } catch (e) {
      console.error(e);
    }
    const prefix =
      "https://firebasestorage.googleapis.com/v0/b/easyhouse-am.appspot.com/o/";
    let dados = snap.data();
    dados.fachada = prefix + dados.fachada.replace("/", "%2F") + "?alt=media";
    return {
      data: dados
    };
  },
  created() {
    this.fsSelectOne("example", this.id).then(res => {
      this.data = res.data();
    });
  }
};
</script>
vue.js nuxt.js ssr
1个回答
0
投票

如果您正在执行nuxt generate,则它将在没有服务器的情况下构建静态页面。因此,您甚至没有服务器来调用异步数据方法。

© www.soinside.com 2019 - 2024. All rights reserved.