Nuxt中引入JS脚本报错 - jQuery requires a window with a document

不止一次遇到这个问题了。

在nuxt的issue It’s not clear how to include jQuery code #356里面看到了类似情况，不过这位smth仁兄最后选择了放弃，改用directives，可惜这个issue已经closed，不然可以用我蹩脚的英语来码楼……

这里记录下我的解决方法。

问题描述

在plugins下，添加了JS文件，该文件中引入了 jQuery，定义了多个函数，函数中包含了DOM操作。

比如这样的一个helper.js 文件：

// plugins/helper.js
import $ from 'jquery'

export default {
    methods: {
        saySomething(words) {
      const element = $(`<h2>${content}</h2>`)
      ......
    }
    }
}

在组件中调用了该文件中的方法 saySomething，页面报出 jQuery requires a window with a document 的错误。

解决方法

根据Window 或 Document 对象未定义？所说的：

一些只兼容客户端的脚本被打包进了服务端的执行脚本中去。 对于只适合在客户端运行的脚本，需要通过使用 process.client 变量来判断导入

所以解决方法就很简单了，给saySomething添加上判断可执行的条件即可。

修改helper.js的saySomething：

// plugins/helper.js
import $ from 'jquery'

export default {
    methods: {
        saySomething(words) {
      if (process.client) {
        const element = $(`<h2>${content}</h2>`)
          ......
      }  
    }
    }
}

OK.

参考

Window 或 Document 对象未定义？