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

869 阅读1分钟
  1. 分开两个目录,一个专门放移动端,一个专门放 pc 端

    image.png

  2. 创建两个 router.js 文件

    image.png

  3. 创建 isMobile.js 文件

        import router_mobile from "router_mobile.js"
        
        let isMobile = navigator.userAgent.match(/(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i);
        
        // 当移动端没有路由时使用pc端
        isMobile = isMobile && Object.keys(Router_mobile).length !== 0;
        
        export default isMobile
  1. 创建真正的 router 文件
    import Vue from "vue";
    
    import Router_pc from "/route/router";
    import Router_mobile from "/route/router_mobile";
    
    let allRouter = isMobile ? Router_mobile : Router_pc;
    
    export { router };
  1. main.js 使用router
    import Vue from "vue";
    import router from "./router";
    
    new Vue({
        router,
        store,
        el: "#app",
        i18n,
        render: h => h(App),
    });