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"),
    },
    // 手機(jī)端
    {
      path: '/mobile/home',
      name: 'mobile/home',
      component: ()=>import("@/components/mobile/home"),
    },
  ]
})

mounted(){
    if (this._isMobile()) {
      // 手機(jī)端
      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", // 要轉(zhuǎn)化的單位       
     viewportWidth: 1920, // UI設(shè)計(jì)稿的寬度       
     unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)       
     propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換     
     viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw       
     fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw      selectorBlackList: ["wrap"], // 指定不轉(zhuǎn)換為視窗單位的類名，       
     minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換       
     mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false      
     replace: true, // 是否轉(zhuǎn)換后直接更換屬性值       
     exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配   
     include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會(huì)被轉(zhuǎn)換
     landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
     landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
     landscapeWidth: 1920 // 橫屏?xí)r使用的視口寬度    
    }
  }
}

// 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,那么就將設(shè)計(jì)稿變?yōu)?75px。如果讀取的文件不是vant的文件,那么就將設(shè)計(jì)稿變?yōu)?50px。這樣就可以避免vant組件在750px下出現(xiàn)樣式縮小的問題了。拼接的原因是Windows和iOS系統(tǒng)的路徑轉(zhuǎn)義符不一樣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
      }
    }
  }
}