一個Vue項目同時包含PC端頁面和移動端頁面

大部分狀況下在作項目時，pc端和移動端是分開兩個項目的，可是也有少部分狀況，頁面不多的時候，就好比我此次要作的介紹頁（從第三方應用跳轉到本公司平臺，先跳轉到介紹頁，再從介紹頁進去執行免登陸操做），移動端一個介紹頁，pc端一個介紹頁，又不想用原始的html+jquery作，因而就在一個項目中同時存放pc頁面和移動端頁面。

當我使用電腦打開時就顯示pc端的介紹頁，當使用手機打開時就顯示wap端的介紹頁（同時區分是微信打開仍是手機網頁打開）

1. 使用vue-cli搭建一個項目，這裏就很少說了

2. 在搭建好的項目中新建兩個文件夾，一個存放pc文件，一個存放wap文件

3. router中配置相對應的路由地址

4. 使用vue-meta單獨爲移動端的項目配置對應的meta

（1）安裝vue-meta ： npm install vue-meta --save

（2）main.js中引用meta

（3）在單個wap端的vue頁面中設置meta信息

該例子中是introduce_wap中index.vue

配置完能夠看到wap端的介紹頁網頁中head多了一個meta的配置，pc端不須要，因此沒有配置，天然也就沒有下面這個meta

6. 引入common.js文件來適應單位爲rem的wap頁面

!function(doc, win) {  
    var docEl = doc.documentElement,      
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',      
    recalc = function() {          
        var clientWidth = docEl.clientWidth;          
        if (!clientWidth) return;          
        if (clientWidth >= 750) {              
            docEl.style.fontSize = '100px';          
        } else {              
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';          
        }      
    };  
    if (!doc.addEventListener) return;  
    win.addEventListener(resizeEvt, recalc, false);  
    doc.addEventListener('DOMContentLoaded', recalc, false);
}(document, window);複製代碼

而後在main.js引入該common文件

7. 判斷是電腦打開仍是手機打開的，電腦打開的顯示introduce_pc頁面，手機打開的顯示introduce_wap頁面

_isMobile() {      
    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;    
}複製代碼

8. 判斷是微信打開仍是網頁打開，執行相應操做（例如：微信打開的話，二維碼的內容提示爲‘長按識別二維碼進入小程序’，網頁打開的話，內容提示爲‘請保存上方微信小程序圖片，在微信掃一掃中打開’）

// 判斷是微信打開仍是瀏覽器打開    
let ua = navigator.userAgent.toLowerCase();    
if (ua.match(/MicroMessenger/i) == "micromessenger") {        
    this.isWeixin = true    
} else {        
    this.isWeixin = false    
}複製代碼

這樣，全部功能就結束啦，如圖所示，電腦打開就是正常的pc頁面

手機打開或者點擊網頁的設備調試工具，就是wap端的頁面啦