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 参考

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

- 传送门：https://juejin.cn/post/7033793636760453133#heading-13
- 传送门：https://blog.csdn.net/qq_43654065/article/details/120365679
- 传送门：https://www.cnblogs.com/1463069300limingzhi/p/11703243.html