vue中实现一个项目里兼容移动端和pc端

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    // pc端
    {
      path: '/',
      name: 'pc/home',
      component: ()=>import("@/components/pc/home"),
    },
    // 手机端
    {
      path: '/mobile/home',
      name: 'mobile/home',
      component: ()=>import("@/components/mobile/home"),
    },
  ]
})

mounted(){
    if (this._isMobile()) {
      // 手机端
      this.$router.replace("/mobile/home");
    } else {
      // pc端
      this.$router.replace("/");
    }
},
methods：{
 _isMobile() {
      let flag = navigator.userAgent.match(
     /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
      );
      return flag;
    },
}

//引入 postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev 

//postcss.config.js
 
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
     unitToConvert: "px", // 要转化的单位       
     viewportWidth: 1920, // UI设计稿的宽度       
     unitPrecision: 6, // 转换后的精度，即小数点位数       
     propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换     
     viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw       
     fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，       
     minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换       
     mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false      
     replace: true, // 是否转换后直接更换属性值       
     exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配   
     include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
     landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
     landscapeUnit: 'vw', // 横屏时使用的单位
     landscapeWidth: 1920 // 横屏时使用的视口宽度    
    }
  }
}

// postcss.config.js
const path = require('path');
 
module.exports = ({ webpack }) => {
  const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
//如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。拼接的原因是Windows和iOS系统的路径转义符不一样Windows是“/”，ios是“\”
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: viewWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}