nuxt3 window is not defined错误

问题
在 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实例。

在Vue组件中使用@logicflow/core依赖库时，需要确保客户端已经初始化完成，否则可能会出现错误。因此，在Vue组件中，我们使用了await nuxt.ready()等待客户端初始化完成后再创建LogicFlow实例。