Nuxt 判断手机 ipad pc 三端

一、js 判断

根据浏览器ua判断当前是否为移动设备：
middleware中间件执行流程顺序：

1、nuxt.config.js
2、匹配布局
3、匹配页面

项目根目录下新建 middleware 文件夹，新建 midd.js 文件

export default function ({ isServer, req, redirect, route }) {
    const os = (function() {
      const ua = req ? req.headers['user-agent'] : navigator.userAgent || '',
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet =
          /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian
      return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc,
      }
    })()

    if (os.isAndroid || os.isPhone) {
      console.log('手机')
    } else if (os.isTablet) {
      console.log('平板')
    } else if (os.isPc) {
      console.log('电脑')
    }
}

然后在 nuxt.config.js加上对应配置：

router: {
middleware: ['midd']
},
这样的话在每个页面渲染前都会调用midd.js，如果不需要每个页面都判断的话可以在需要判断跳转的页面里面写，然后把nuxt.config.js里面的去掉。

二、device.js 插件判断

下载

//npm
npm install current-device

//yarn
yarn add current-device

vue 在 main.js引入，Nuxt 在哪里用，哪里引入，例如，middleware 中间件

import device from 'current-device'

使用

if (device.mobile()) {

  console.log('移动手机')

} else if (device.ipad()) {

  console.log('ipad')

} else if (device.desktop()) {

  console.log('电脑')

}

API 参考

Device	JavaScript Method
Mobile	device.mobile()
Tablet	device.tablet()
Desktop	device.desktop()
iOS	device.ios()
iPad	device.ipad()
iPhone	device.iphone()
iPod	device.ipod()
Android	device.android()
Android Phone	device.androidPhone()
Android Tablet	device.androidTablet()
BlackBerry	device.blackberry()
BlackBerry Phone	device.blackberryPhone()
BlackBerry Tablet	device.blackberryTablet()
Windows	device.windows()
Windows Phone	device.windowsPhone()
Windows Tablet	device.windowsTablet()
Firefox OS	device.fxos()
Firefox OS Phone	device.fxosPhone()
Firefox OS Tablet	device.fxosTablet()
MeeGo	device.meego()
Television	device.television()