一个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端的页面啦