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

Question

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

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

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错误所致，其中在服务器上无法使用vie-ripple-directive。为了解决这个问题，您需要指示Nuxt仅在客户端上加载插件。

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

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

第二，将plugins数组更新为以下内容：

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

.client后缀信号通知nuxt仅在客户端上运行插件。

可以找到更多信息here

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