nuxt 的报错 document is not defined的解决方法

已于 2023-09-13 15:28:40 修改
阅读量6.9k 收藏 3
点赞数
分类专栏： 报错解决方案 文章标签： vue.js javascript html
于 2021-09-09 08:26:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mocoll/article/details/120193132
版权
前端 同时被 3 个专栏收录
107 篇文章 1 订阅
订阅专栏
框架
34 篇文章 1 订阅
订阅专栏
报错解决方案
32 篇文章 0 订阅
订阅专栏
本文介绍了如何在Nuxt.js项目中创建并添加自定义插件。首先，你需要在`plugins`目录下创建一个新的JS文件，然后在文件中引入所需的包。接着，打开`store`下的`nuxt.config.js`，将新建的JS文件路径添加到`src`配置项，并设置`ssr`为`false`。最后，记得保存配置后重启项目，以避免因未重新启动导致的`window is not defined`错误。
摘要由CSDN通过智能技术生成

一、在plugins文件夹加下创建一个xxx.js文件
在这里插入图片描述
二、文件内写入用到的包的路径
在这里插入图片描述
三、找到store下的nuxt.config.js
在这里插入图片描述
四、按照下面格式将刚刚创建的js文件的路径写在src上，ssr改为false
在这里插入图片描述
注意：刚刚修改完配置文件需要重新启动项目，不然只刷新界面可能会出现window is not defined的报错

墨_风
关注
专栏目录
Nuxt - 引入第三方插件或自定义函数方法（document / window is not defined ）报错未定义解决方案
王佳斌
07-07 5252
原因很简单，您引入的第三方库内源码用到了 `window / document`，当 Nuxt 在服务端（Node.js）编译渲染时，node 环境 本身并没有 `window / document` 对象，所以就报错了。Nuxt 等 SSR 框架中，引入第三方包 (类似于 富文本编辑器： UEditor、wangEditor、vue2Editor、quill…) 的时候，报错 Document / Window is not defined，或者报错 render function or template
Nuxt - 解决引入 qrcodejs2.js / QRCode.js 报错（document is not defined）
王佳斌
08-24 3526
Nuxt - 解决引入 qrcodejs2.js / QRCode.js 报错（document is not defined），nuxt.js 如何使用qrcodejs2.js / QRCode.js 二维码插件？nuxt使用QRCode.js 生成二维码，nuxt项目中使用qrcode，Nuxt.js 不能用npm安装插件，原本是vue写的，改用 nuxt.js 项目后 qrcodejs2.js / QRCode.js 报错，nuxt使用qrcodejs2，nuxt使用QRCode.js 生成二维码，j
[报错]Document is not defined
摸魚的猫博客
06-21 3091
前端Nuxt使用组件的报错
nuxt.js npm install 后不可用出现错误：document is not defined
我爱吃红薯的博客
12-10 8973
1，出现原因： https://zh.nuxtjs.org/faq/window-document-undefined/ 简单的说：是由于nuxt.js会在服务端渲染页面，而服务端并没有window或document。 我由于要在nuxt.js使用上传头像图片的插件，如下 github:https://github.com/dai-siki/vue-image-crop-upload 所以直接install后出现document is not defined。 2，我的解决办...
NUXT3项目二开开启SSR后报错localStorege(window) is not defined解决方案
最新发布
lmn_storyteller的博客
09-18 191
写项目的时候要求在二开项目上开启ssr，配置开启后一直报错window（localStorege、document） is not defined ,多方搜索有人说:在mounted生命周期中用。由于 nextjs 是服务端渲染,它会预渲染页面后生成 HTML，然后再将其发送给客户端，因此在渲染时无法识别 window/document 浏览器的对象方法。: 这段代码检查当前环境是否为客户端（即在浏览器中）。就可以了，但是主体没有解决，大部分是操作dom的问题。对）只能在客户端运行。
解决nuxt3中scroll组件渲染报错：document is not defined
jiaohuizhuang6019的博客
12-14 1156
解决nuxt3中scroll组件渲染报错：document is not defined
Nuxt 插件 window 或 document is not defined
weixin_33724059的博客
02-19 6402
nuxt中导致document is not defined官方的解释是：一些只兼容客户端的脚本被打包进了服务端的执行脚本中去,并且给出了解决方案通过使用 process.client 变量来判断导入，即: if (process.client) { require('external_library') } 如果你是使用npm引入的第三方插件的话，那这个方法就十分不实用，既然因为只兼容客户端...
【Nuxt】Nuxt3 中监听 document 滚动报错 document is not defined
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
02-23 469
【代码】【Nuxt】Nuxt3 中监听 document 滚动报错 document is not defined。
nuxt Window 或 Document未定义解决方案
weixin_30782293的博客
04-28 1660
概述 在用nuxt开发服务端渲染项目并引入第三方库的时候，经常会遇到window或document未定义的情况，原因是这个第三方库里面用到了window或者document，然后在服务端打包的时候，node环境并没有window或者document，所以就报了window或document未定义的错误。 而且，我们在引入第三方库的时候，并不希望把第三方库打包进app.js，而是希望这个第三方库只在...
nuxt document is not defined
01-09
nuxt document is not defined 是一个常见的错误信息，表示在 Nuxt.js 应用中尝试使用 document 对象时出现了问题。Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，它主要运行在 Node.js 环境中，而不是浏览器环境中...
使用Nuxt重构已有Vue项目(Axios默认根域名、切换Vuetify字体、配置Mavon编辑器和常见异常解决localStorage/window/document is not defined)
"✧treasure mountain✧"
05-23 6849
近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好 因此用Nuxt重构了该项目 对项目进行了一次优化 由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下 一、概念 什么是Nuxt Nuxt.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR) Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名 对于公司内部网站等不需要排名的网站 可以不用SEO 但对于那些
Nuxt.js 报错 window is not defined || document is not defined
张火火
02-27 550
将涉及到window的写在里面。
Nuxt中关于window or document is not defined的问题总结
热门推荐
Senar的博客
05-29 1万+
关于这类问题一般有两种场景 引用第三方组价时，比如引用vue-awesome-swiper这种的第三方组件时，因为源组件代码中包含有操作window对象，所以这一类的window is not defined按照官方的使用插件的方法引入就可以解决 // 这里就以vue-awesome-swiper这个组件为例 import Vue from 'vue' import VueAwesomeSwi...
Nuxt 报错 Document / Window not defined 亲测解决方案（vue2Editor富文本编辑器之类三方包）
张兴华的博客
03-27 7209
本文主要介绍 vue2Editor 在 Nuxt 中的使用，以及报错解决方案(亲测有效)。 1、问题背景 项目中要使用富文本编辑器，看了下一些流行的编辑器（UEditor、wangEditor、vue2Editor、quill…），最后选择了 vue2Editor，虽然功能不多，star 也不多，但是我喜欢它的超轻量（只有200+K），反正我们的需求也不需要那么多功能。 但上天往往爱考验我，...
Nuxt中报：window or document is not defined 问题的解决办法
zyf971020的博客
03-14 951
Nuxt中报：window or document is not defined 问题的解决办法
Nuxt使用mavon-editor富文本编辑器出现“document is not defined“
My52Hz
03-16 628
问题描述         在NuxtJs中使用富文本编辑器 mavon-editor 总是经常出现 document is not defined 这个错误,有时候明明已经将 mavon-editor作为全局插件引用到配置文件里面了可还是脑残报错,如下图所示: 问题分析          window 对象在NuxtJs中是属于服务端方法,在客户
nuxt 刷新报Window 或 Document未定义解决方案
MYuanFang的博客
08-26 668
首页我们明白问题的来源，页面跳转是没问题的，当我们刷新页面才会出来，我们知道nuxtjs是做服务端渲染的，他有很多声明周期是运行在服务端的，以及正常的vue声明周期mounted之前均是在服务端运行的，那么服务端是没有比如window对象的location、navagitor等，以及H5的FormData()方法，所以当你在created之前使用这些时，会报错，那么如何处理呢？ 首页定义然后在mounted中赋值 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值