nuxt 如何引入js_Nuxt中引入JS脚本报错

2024-04-16 06:08:05

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

在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 = $(`

${content}

`)

......

}

}

}

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

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

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

修改helper.js的saySomething：// plugins/helper.js

import $ from 'jquery'

export default {

methods: {

saySomething(words) {

if (process.client) {

const element = $(`

${content}

`)

......

}

}

}

}

OK.

参考

nuxt 如何引入js_Nuxt中引入JS脚本报错相关推荐

python调用js文件报错_python - selenium 运行网页中js脚本报错,提示未定义
问题问题1 selenium 运行网易中js脚本报错提示未定义报错提示如下: driver.execute_script("javascript:amsInit(62800,30315 ...
linux 简单脚本fi报错,shell脚本报错：[: =: unary operator expected
shell脚本报错:"[: =: unary operator expected" 在匹配字符串相等时,我用了类似这样的语句: if [ $STATUS == "OK&q ...
运行shell脚本报错：“syntax error near unexpected token 的解决方法”
运行shell脚本报错:"syntax error near unexpected token 的解决方法" 今天写了个Cshell脚本,运行报错syntax error near ...
shell脚本报错：[: =: unary operator expected
shell脚本报错:"[:=:unaryoperatorexpected" 在匹配字符串相等时,我用了类似这样的语句: if [ $STATUS == "OK" ...
删除docker registry镜像脚本报错No repositories directory found inside REGISTRY_DATA_DIR
删除docker registry镜像脚本报错No repositories directory found inside REGISTRY_DATA_DIR registry使用delete_doc ...
Windows下运行python脚本报错“ImportError： No Module named ...”的解决方法
Windows下运行python脚本报错"ImportError: No Module named ..."的解决方法参考文章: (1)Windows下运行python脚本报错& ...
DBeaver执行.sql脚本报错：ERROR 1064 (42000) at line 1
DBeaver执行.sql脚本报错,报错内容如下: ERROR 1064 (42000) at line 1: You have an error in your SQL syntax; check ...
DBeaver执行sql脚本报错：CreateProcess error=193, %1 不是有效的 Win32 应用程序。
DBeaver执行sql脚本报错:CreateProcess error=193, %1 不是有效的 Win32 应用程序. 如图: 定位发现DBeaver默认安装的mysql.exe大小为0字节! ...
elementui的css文件没有引入_Python中引入模块详细介绍，使用模块的过程中注意事项教程...
为此 Python 提供了一个办法,把这些定义存放在文件中,这个文件被称为模块. 模块是一个包含所有你定义的函数和变量的文件,其后缀名是.py.模块可以被别的程序引入,以使用该模块中的函数等功能. ...

最新文章

热门文章