判断是否为移动端

1、使用is-mobile依赖

• 先安装is-mobile依赖

"dependencies": {
    "is-mobile": "^2.2.1",
  },

• 在页面中引入is-mobile使用即可。可以在router文件中通过路由守卫判断跳转PC页面还是h5页面

import mobile from 'is-mobile'
export default [
  {
    path: '/account',
    name: 'account',
    component: Layout,
    redirect: '/account/web/personal/personal-info'
  },
  {
    path: '/account/web/personal/personal-info',
    name: 'personalAccount',
    component: () => import('@/views/account/web/personal/PersonalInfo'),
    meta: {
      accountInfo: true
    },
    beforeEnter: (to, from, next) => {
      if (store.state.account.tenantType === 'PERSON') {
        mobile() ? next({ name: 'mobileAccount' }) : next()
      } else {
        mobile()
          ? next({ name: 'mobileAccount' })
          : next({
              name: 'companyCompanyAccount'
            })
      }
    }
  },
}

2、利用util的方法判断

• 在util中添加hasMobile方法

//  判断是否为移动端
export function hasMobile () {
    let isMobile = false;
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        // console.log('移动端');
        isMobile = true;
    }
    if (document.body.clientWidth < 800) {
        isMobile = true;
    }
    return isMobile
}

• 在vuex文件src/store/ module/app.js中添加hasMobile属性

import {
    hasMobile
} from '@/libs/util';
export default {
    state: {
        hasMobile: hasMobile(),
    },
    mutations: {
        setMobile (state, hasMobile) {
            state.hasMobile = hasMobile
        },
    },
}

• 在组件src/components/main.js文件中设置hasMobile

import { hasMobile } from '@/libs/util'

mounted () {
         // 浏览器的窗口发生改变时，才会触发resize函数）
        window.addEventListener('resize', debounce(() => {
            this.$store.commit('setMobile', hasMobile());
        }));
    }

• 使用的时候根据this.$store.state.app.hasMobile的值判断是否为移动端即可
• 公共样式可以通过媒体查询判断

@media screen and (min-width: 800px) {

}

• Window的resize事件及反抖函数应用参考https://blog.csdn.net/Anna_lhy/article/details/103186442