问题
在 nuxt 中直接使用 window/document 会报 ReferenceError: window is not defined
原因
原因其实也比较简单,由于 nextjs 是服务端渲染,它会预渲染页面后生成 HTML,然后再将其发送给客户端,因此在渲染时无法识别 window/document 浏览器的对象方法。
解决方法,一
这个方法比较简单粗暴,直接判断 window 是否存在再执行对应代码(document 同理)
if (typeof window !== 'undefined') {
console.log('window:', window);
}
解决方法,二
修改nuxt.config.js文件
在nuxt.config.js
文件中添加以下配置:
import createPersistedState from 'vuex-persistedstate'
import path from 'path'
export default {
// 其它配置...
build: {
transpile: ['@logicflow/core'],
extend(config, { isDev, isClient }) {
if (process.env.NODE_ENV === 'production' && process.client) {
config.optimization.splitChunks.maxSize = 200000;
}
}
},
plugins: [
// 在这里引入插件
'~/plugins/logicflow.js',
{ src: '~/plugins/localStorage.js', ssr: false } // 忽略服务端渲染
]
}
上述代码中,我们使用了两个插件:~/plugins/logicflow.js
和~/plugins/localStorage.js
。
~/plugins/logicflow.js
用于按需引入@logicflow/core
依赖库,并将其挂载到Vue实例的原型上,以便在Vue组件中使用。
在项目的根目录下创建~/plugins/logicflow.js
文件,添加以下代码:
import LogicFlow from '@logicflow/core'
export default (context, inject) => {
// 只在客户端运行
if (process.client) {
inject('LogicFlow', LogicFlow)
}
}
上述代码中,我们使用了Nuxt.js提供的插件机制,将LogicFlow
对象注入到Vue
实例的原型上,并通过inject
函数将其挂载到Vue组件中,以便在组件中使用。
~/plugins/localStorage.js
用于解决本地储存问题。该插件需要使用@nuxtjs/universal-storage
依赖库,请确保已经在第一步中安装过了。
在项目的根目录下创建~/plugins/localStorage.js
文件,添加以下代码:
import createPersistedState from 'vuex-persistedstate'
export default ({ store }) => {
createPersistedState({
key: 'my-app',
paths: ['user', 'token'] // 自定义需要本地存储的属性
})(store)
}
上述代码中,我们使用了vuex-persistedstate
依赖库,在页面刷新时,可自动将Vuex
中的数据保存到本地缓存中,以便下次使用时恢复。
解决方法,三
3.在Vue组件中使用
在Vue组件中使用LogicFlow时,需要先在
例如:
<template>
<div id="box"></div>
</template>
<script>
import { NuxtApp } from '@nuxt/types/app'
import LogicFlow from '@logicflow/core'
export default {
async mounted() {
// 获取Nuxt.js实例
const nuxt: NuxtApp = this.$nuxt
// 等待客户端初始化完成
await nuxt.ready()
// 创建LogicFlow实例
const lf = new LogicFlow({
container: document.querySelector('#box'),
width: 800,
height: 600
})
}
}
</script>
上述代码中,我们在Vue组件的mounted生命周期函数中创建了一个LogicFlow
实例,并将其挂载到<div id="box">
元素中。在创建LogicFlow实例时,我们使用了document.querySelector('#box')
来获取DOM节点,并通过this.$nuxt
获取了Nuxt.js实例。文章来源:https://www.toymoban.com/news/detail-647469.html
在Vue组件中使用@logicflow/core
依赖库时,需要确保客户端已经初始化完成,否则可能会出现错误。因此,在Vue组件中,我们使用了await nuxt.ready()
等待客户端初始化完成后再创建LogicFlow实例。文章来源地址https://www.toymoban.com/news/detail-647469.html
到了这里,关于nuxt3 window is not defined错误的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!