vue中判斷APP 為ios系統 安卓系統 瀏覽器判斷 微信 qq 支付寶

在入口文件main.js中引入

 

// userAgent client
const userAgent = navigator.appVersion
const userAgentL = userAgent.toLowerCase()
Vue.prototype.$client = Vue.client = {
  IE: userAgentL.indexOf('msie') > -1 && !userAgentL.indexOf('opera') > -1,
  GECKO: userAgentL.indexOf('gecko') > -1 && !userAgentL.indexOf('khtml') > -1, // 火狐內核
  WEBKIT: userAgentL.indexOf('applewebkit') > -1, // 蘋果、谷歌內核
  OPERA: userAgentL.indexOf('opera') > -1 && userAgentL.indexOf('presto') > -1, // opera內核
  TRIDENT: userAgentL.indexOf('trident') > -1, // IE內核
  MOBILE: !!userAgent.match(/AppleWebKit.*Mobile.*/), // 是否為移動終端
  MOBILEDEVICE: !!userAgentL.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i), // 是否為移動終端
  IOS: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios終端
  ANDROID: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1, // android終端或者uc瀏覽器
  IPHONE: userAgent.indexOf('iPhone') > -1, // 是否為iPhone或者QQHD瀏覽器
  IPAD: userAgent.indexOf('iPad') > -1, // 是否iPad
  // WEBAPP: !userAgent.indexOf('Safari') > -1, //是否web應該程序，沒有頭部與底部
  QQBROWSER: userAgent.indexOf('QQBrowser') > -1, // 是否QQ瀏覽器
  WEIXIN: userAgent.indexOf('MicroMessenger') > -1, // 是否微信
  // QQ: userAgent.match(/\sQQ/i) === ' qq', // 是否QQ
  QQ: userAgent.match(/QQ\/[0-9]/i) ? true : false, // 是否QQ
  WEIBO: userAgent.match(/WeiBo/i) == "weibo", // 微博
  ALIPAY: userAgent.indexOf('AlipayClient') > -1, // 是否支付寶

}
// 全局判斷
if (Vue.client.WEBKIT) {
  console.log('谷歌')
}

如果其它頁面判斷

 

 if(this.$client.WEBKIT) {
        console.log('谷歌首頁')
      }