Nuxt3 移动端判断

Question

在使用nuxt3 想要完成在移动端浏览时对页面进行拦截或者重定向

所以引入了 current-device 这个库来进行移动端的判断

在中间件中导入该库 在渲染的时候会爆出 window is not defined 的问题
看了很多博客也没有解决

中间件是:

在index页面，尝试在onMounted后添加这个中间件

这个中间件仍然会在页面渲染前触发
仍然会报错，不知道该如何处理了，希望前大辈佬们能解惑

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

在 Nuxt3 中，因为运行时环境不同，无法直接使用浏览器环境的 window 对象，而 current-device 库中依赖浏览器环境。因此，我们需要在运行时进行检查并避免这个错误。

以下是解决方案：

1. 使用 nuxt 的 hook，等待应用程序挂载后再添加中间件，这样可以确保在客户端环境下运行。

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:mounted', () => {
  // 在这里添加你的代码
  nuxtApp.addRouteMiddleware('isToMobile')
})

1. 将判断移动设备的代码直接添加到中间件中，并使用 route 对象获取请求路径。

import { RouteMiddleware } from '@nuxt/types'

const isMobile: RouteMiddleware = ({ route, redirect }) => {
  if (process.client) {
    const ua = navigator.userAgent
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(ua)

    if (isMobile && route.path !== '/mobile') {
      return redirect('/mobile')
    }
  }
}

export default isMobile

**注意：**这里的路径 /mobile 应该是你自己设置的用于移动设备的页面路径，需要根据实际情况修改。