vue項目同時兼容pc和移動端的解決方式

更新時間：2023年10月08日 14:46:34 作者：擺爛的胡蘿卜

我們經(jīng)常在項目中會有支持pc與手機端需求,下面這篇文章主要給大家介紹了關于vue項目同時兼容pc和移動端的解決方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

介紹：

公司要求vue開發(fā)的項目，既有移動端又有pc端，但是移動端和pc端展示的內容不一樣，同一個組件樣式也不一樣，移動端展示內容比pc端少，那這個時候在一個項目種怎么做的？

解決方式：

路由寫兩份，一份移動端的，一份pc端的，這兩份路由地址相同，對應的組件不同，在路由的入口文件里去判斷渲染pc的路由還是移動端的路由

import Vue from 'vue';
import Router from 'vue-router';
import { routerM } from './routerM';
import { routerPC } from './routerPC';
Vue.use(Router);
// 是否為手機端
const ISMOBILE = function () {
  let flag = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  );
  return flag;
};
// 創(chuàng)建路由實例
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  fallback: false,
  // 這里判斷后選擇使用移動端的路由還是pc端的路由
  routes: ISMOBILE() ? routerM : routerPC,
});
export default router;

router下routerM.js和routrPC.js代碼：

// routerPC.js
import Layout from '@/layout'
export const routerPC = [
  {
    path: '/login',
    component: () => import('@/views/pc/login/index'),
    hidden: true
  },
]

// routerM.js
export const routerM = [
  {
    path: '/login',
    component: () => import('@/views/mobile/login/index.vue'),
    hidden: true
  },
]

可以看出是寫了兩份組件，導入組件時文件路徑只有pc和mobile兩個單詞的區(qū)別。

拓展

同樣的，當樣式需要寫兩份的時候，也可以在main.js中按需引入

// 是否為手機端
const flag = navigator.userAgent.match(
  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
// PC端和移動端的公共樣式
import '@public/css/common.less';
// 移動端引入公共樣式
if (flag) {
  require('@/assets/css/mobileCommon.less');
}