Nuxt3 web端采用m站适配移动端

nuxt3 web端采用m站适配移动端

1. 创建全局中间件 在middleware文件夹下创建auth.global.js

export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) {
    // 在服务器端处理路由
    const nuxtApp = useNuxtApp();
  } else {
    // 在客户端处理路由

    // 是否是移动端设备
    const isMobile =
      /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(
        navigator.userAgent
      );

    // 是否是手机端路由
    const isRouterMobile = /^\/m\//.test(to.fullPath);

    //屏幕尺寸
    const screenWidth = window.innerWidth;

    // 根据屏幕宽度或设备类型决定是否跳转到移动端路由
    if ((isMobile || screenWidth < 768) && !isRouterMobile) {
      // 移动端设备或屏幕宽度小于768，并且不是/m开头路由
      return navigateTo(`/m${to.fullPath}`);
    }

    if (!isMobile && screenWidth >= 768 && isRouterMobile) {
      // 不是移动端设备且屏幕宽度大于或等于768，并且是/m开头路由
      return navigateTo(`${to.fullPath.replace("/m", "")}`);
    }

    // // 移动端并且 不是/m开头路由
    // if (isMobile && !isRouterMobile) {
    //   return navigateTo(`/m${to.fullPath}`);
    // }

    // // 不是移动端 是/m开头路由
    // if (!isMobile && isRouterMobile) {
    //   return navigateTo(`${to.fullPath.replace("/m", "")}`);
    // }
  }
});

2. 在page页面下创建移动端的页面了