无法在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/ripple.client.js'
]

.client后缀向nuxt发出信号，使其仅在客户端上运行该插件。

可以找到更多信息here

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