Nuxt.js中运行设备及环境判断

1.utils文件下创建device.js文件,机型判断

/**
 *
 * @param {*} UA ,就是userAgent
 * @returns  type: 设备类型
 *           env: 访问环境(微信/微博/qq)
 *           masklayer: 就是给外部拿到判断是否显示遮罩层的,一些特殊环境要引导用户到外部去打开访问
 */

function isWechat (UA) {
  return /MicroMessenger/i.test(UA)
}

function isWeibo (UA) {
  return /Weibo/i.test(UA)
}

function isQQ (UA) {
  return /QQ/i.test(UA)
}

function isTouTiao (UA) {
  return /NewsArticle/i.test(UA)
}

function isTiktok (UA) {
  return /byte/i.test(UA)
}

function isFacebook (UA) {
  return /FB/i.test(UA)
}

function isMoible (UA) {
  return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA)
}

function isIOS (UA) {
  return /iPhone|iPad|iPod/i.test(UA)
}

function isAndroid (UA) {
  return /Android/i.test(UA)
}

function getKernel (UA) {
  if (/Trident/i.test(UA)) {
    return 'trident' // IE
  } else if (/Presto/i.test(UA)) {
    return 'presto' // opera内核
  } else if (/AppleWebKit/i.test(UA)) {
    return 'webKit' // 苹果、谷歌内核
  } else if (/Gecko/i.test(UA) && !UA.includes('KHTML')) {
    return 'gecko' // 火狐内核
  } else {
    return ''
  }
}

export function deviceType (UA) {
  if (isMoible(UA)) {
    if (isIOS(UA)) {
      if (isWechat(UA)) {
        return {
          type: 'ios',
          env: 'wechat',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isWeibo(UA)) {
        return {
          type: 'ios',
          env: 'weibo',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isQQ(UA)) {
        return {
          type: 'ios',
          env: 'qq',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isTouTiao(UA)) {
        return {
          type: 'ios',
          env: 'toutiao',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isTiktok(UA)) {
        return {
          type: 'ios',
          env: 'tiktok',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isFacebook(UA)) {
        return {
          type: 'ios',
          env: 'fb',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      return {
        type: 'ios',
        kernel: getKernel(UA)
      }
    }
    if (isAndroid(UA)) {
      if (isWechat(UA)) {
        return {
          type: 'android',
          env: 'wechat',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isWeibo(UA)) {
        return {
          type: 'android',
          env: 'weibo',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isQQ(UA)) {
        return {
          type: 'android',
          env: 'qq',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isTouTiao(UA)) {
        return {
          type: 'android',
          env: 'toutiao',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isTiktok(UA)) {
        return {
          type: 'android',
          env: 'tiktok',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      if (isFacebook(UA)) {
        return {
          type: 'android',
          env: 'fb',
          masklayer: true,
          kernel: getKernel(UA)
        }
      }
      return {
        type: 'android',
        kernel: getKernel(UA)
      }
    }
    return {
      type: 'mobile',
      kernel: getKernel(UA)
    }
  } else {
    return {
      type: 'pc',
      kernel: getKernel(UA)
    }
  }
}

2.middleware里添加device.js文件

import { deviceType } from '~/utils/deviceType'
export default function (context) {
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
  context.deviceType = deviceType(context.userAgent)
  context.store.commit('SET_DEVICE_TYPE', context.deviceType)
}

3.nuxt.config.js文件配置device中间件

router: {
    middleware: ['device']
}