无法在 Nuxt 应用程序中添加指令作为插件

Question

我正在尝试将Ripple 包合并到我的Nuxt 应用程序中。

在Nuxt docs 和包docs example 之后，我在plugins/ 目录中有一个ripple.js 文件，其中包含：

import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)

然后在nuxt.config.js 我有：

plugins: [
  '~/plugins/ripple.js'
],

但现在该应用程序根本无法运行，屏幕上出现一些 Unexpected token export 错误消息，vm.js 中出现“缺少堆栈帧”错误消息。

我不知道这意味着什么，也不知道我做错了什么，有什么建议吗？

Answer 1

这是由于 SSR 错误，无法在服务器上使用 vue-ripple-directive。为了解决这个问题，您需要指示 Nuxt 仅在客户端加载插件。

要解决此问题，请执行以下 2 件事：

首先，将ripple.js 重命名为ripple.client.js。

其次，更新 plugins 数组如下：

plugins: [
  '~/plugins/ripple.client.js'
]

.client 后缀表示 nuxt 仅在客户端上运行插件。

更多信息可以找到here

在添加 Vue 插件时，请始终牢记此方法，尤其是当它们以某种方式与 DOM 交互时。我遇到的大多数情况都需要这种方法才能正常运行，因为服务器上的 DOM 不可用。