Nuxt：页面重新加载时页面崩溃

Posted 2023-02-22

【中文标题】Nuxt：页面重新加载时页面崩溃

【英文标题】：Nuxt: Page crashing on page reload

【发布时间】：2020-10-31 00:38:11

【问题描述】：

有人知道为什么用户重新加载页面时子页面会崩溃吗？当您使用 nuxt-link 从另一个页面（使用路由参数）导航到该页面时很好，但是当用户重新加载/刷新页面时，它会崩溃。

这是我的沙盒，您可以在其中进行测试：Codesandbox

来自 nuxt 链接的代码：

<nuxt-link :to="name: 'photos-id-title', params:  id: photo.id, title: photo.title ">

照片详情页面的代码：

<template>
  <section>
    <!-- <template v-if="photo"> -->
    <img
      :id="photo.filename"
      :src="photo.url"
      class="img-fluid thumbnail rounded"
      :
    />
    <h1 class="h3"> photo.title </h1>
  </section>
</template>

<script>
import  Annotorious  from '@recogito/annotorious'
export default 
  data() 
    return 
      photo: ,
      anno: ,
      title: this.$route.params.title
    
  ,
  async mounted() 
    await this.getPhotoDoc()
    this.anno = await new Annotorious( image: this.photo.filename )
  ,
  methods: 
    async getPhotoDoc() 
      const docRef = await this.$fireStore
        .collection('photos')
        .doc(this.$route.params.id)
        .get()
      try 
        if (docRef.exists) 
          // data() returns all data about the doc
          console.log('got the doc: ', docRef.data())
          this.photo = docRef.data()
         else 
          console.log('no docs exist')
        
       catch (error) 
        console.log('Error getting document:', error)
      
    
  ,
  head() 
    return 
      title: this.photo.title,
      meta: [
        
          hid: 'description',
          name: 'description',
          content: this.photo.description
        
      ]
    
  

</script>

用户旅程：点击导航栏中的照片，选择页面上的任何照片。您将看到“照片详细信息”页面。加载很好。尝试刷新页面——它会崩溃。

注意：我也在使用 Vue-cli 的常规/普通 vue 应用程序中搭建了这个脚手架，没有任何问题。只有 Nuxt 似乎有问题。必须与 s-s-r 相关？

感谢您的帮助...

【问题讨论】：

它与 s-s-r 有关，因为页面仅在重新加载时才会崩溃。您能给我们一些错误或修复代码框链接吗？

抱歉链接...不知道它是私人的。现在就试试！ codesandbox.io/s/thirsty-nash-4mwol

看来问题出在我正在使用的 Annotorious 插件上。在 Vue 应用程序中很好，但在 Nuxt 中没有。我没有正确加载插件吗？如果禁用该插件，一切正常。

小心你所有的 API 密钥都在你的代码框里

谢谢。我不认为这是一个问题。 Firebase 的 Google 文档说那里没有秘密。

【参考方案1】：

如果您认为这与 s-s-r 相关并且 Annotorious 插件可能会导致问题，请尝试以下操作：

nuxt.config.js 添加模式为client 的插件

plugins: [
     src: '~/plugins/client-only.js', mode: 'client' , // only on client side
  ]

您可以在 nuxtjs 文档here中找到更多信息

【讨论】：

如果我只是为这个插件使用 CDN 会更好吗？ recogito.github.io/annotorious/getting-started

应该没有区别。有些插件可能只在浏览器中工作，因为它们缺乏 s-s-r 支持。只需检查nuxtjs docs 并试一试 :)

我不确定我做对了。首先，我需要像这样创建一个插件吗？ import Vue from 'vue' import Annotorious from '@recogito/annotorious' Vue.use(Annotorious) ?

在plugins 目录下新建一个文件，并将这个import Vue from 'vue' import Annotorious from '@recogito/annotorious' Vue.use(Annotorious) 添加到文件中。然后只需将其添加到nuxt.config.js 中的plugins 数组中，就像我上面建议的那样。

是的，它不起作用。我将提出一个新问题，也将从一张白纸开始。如果你不介意，我会在准备好后用链接 ping 你。感谢您之前的帮助！