NuxtJS：仅外部客户端插件/组件导致页面刷新错误答案

【问题标题】：NuxtJS: external client-side only plugin/component causes error on page refreshNuxtJS：仅外部客户端插件/组件导致页面刷新错误
【发布时间】：2019-11-22 07:27:36
【问题描述】：

我使用 npm install 来包含一个名为 vue-gallery 的仅限客户端的插件，并按照 Nuxtjs 文档中所述的说明将其加载为仅限客户端的插件。该插件工作正常，但有一个例外：如果我在导入插件的任何路由上按 f5，Nuxt 会引发“无效或意外令牌”错误。这是当您将插件定义为客户端和服务器端时总是抛出的错误。如果您直接在浏览器中键入 URL，也会发生同样的情况。但是，当您使用应用程序链接导航到页面时，不会发生这种情况。

请注意，这只是一个外部组件类型的插件，而不是 ES6 插件。

vue-gallery.js

import Vue from 'vue'
import VueGallery from 'vue-gallery'      
Vue.component('vue-gallery', VueGallery)

nuxt.config.js

  plugins: [
    '~/plugins/axios',
    { src: '~/plugins/vue-gallery.js', mode: 'client' }
  ],

在我的页面组件中，只需从 'vue-gallery' 导入 VueGallery

无论如何要解决这个问题？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

在我的页面组件中，只需从 'vue-gallery' 导入 VueGallery

这就是原因。如果你在你的页面中导入它，它将被导入到 SSR 上，因此如果它不兼容 SSR，它会出错。由于您将其作为组件全局添加到插件中，因此您无需将其导入页面

【讨论】：

再次被我的 IDE 欺骗/愚弄。谢谢你。它确实可以在组件中没有任何导入的情况下简单地使用，并且 SSR 错误消失了。