这是我参与11月更文挑战的第2天

我自己大多数的项目使用的技术栈是vue方向，所以下面基本使用方式都可以拿来即用。

但是在说这个问题之前，我们要学会两件事：

在移动端运行展示vue项目，因为如果我们进行移动端调试就要打包上传的话会很麻烦，所以我们可以将vue项目直接运行到移动端设备来展示

在非PC端打印日志，因为我们在调试的过程中，pc端我们可以在Chrome浏览器的F12调试模式下打印，但是移动端就不行了。下面补充一下两种移动端打印日志的方法。

移动端展示vue项目

前提是在连在同一个wifi或局域网下，如果没有条件可以手机开热点也可以的

步骤：

在 vue.config.js 中配置如下

module.exports = {

    devServer: {

        host: '0.0.0.0',

    }

}

运行vue项目

用network的地址在手机浏览器中打开即可

移动端打印日志

方案一：vconsole

下载

//npm

npm install vconsole



//yarn

yarn add vconsole

引入

import VConsole from 'vconsole'

使用

const vConsole = new VConsole();

// or init with options

const vConsole = new VConsole({ maxLogNumber: 1000 });

// 和往常一样直接调用

console.log('Hello world');

// remove it when you finish debugging

vConsole.destroy();

测试

成功会显示如图的标志

方案二：Eruda

Eruda的功能相对来说要比vconsole更加友好

如果想要更加详细的配置，可以链接跳转至gitHub页面进行查看

下载

//npm

npm install eruda --save



yarn

yarn add eruda --save

引入

//main.js 引入

import eruda from 'eruda'

//初始化

eruda.init()

使用

console.log('测试eruda')

扩展

如果不想通过npm的方式引入，可以直接使用cdn来进行引入

把下面的代码贴到public/index.html 中，然后进行直接打印即可

引入成功会显示如图的图形icon

判断手机、电脑、iPad

方案一：navigator.userAgent

这是原生js的语句，直接可以拿来用

亲测mac、ipad、oppo手机，如果

// 返回由客户机发送服务器的user-agent 头部的值

const device = navigator.userAgent

//做判断 通过返回的数据来筛选查找关键信息

if (device.indexOf('iPad') > -1) {

// ipad



} else if (device.indexOf('Android') > -1 || device.indexOf('ios') > -1) {

// 手机



} else {

// 电脑



}

上面的是我自己做的测试，但是不一定全面适配所有机型，如果有朋友自己做了测试可以反馈进行修改和完善

下面我们使用js库来进行判断设备

方案二：device.js

下面是vue项目中开发的步骤，按步骤操作即可

下载

//npm

npm install current-device



//yarn

yarn add current-device

main.js引入

import device from 'current-device'

使用

直接调用方法即可

if (device.mobile()) {

  console.log('移动手机')

} else if (device.ipad()) {

  console.log('ipad')

} else if (device.desktop()) {

  console.log('电脑')

}

参考方法(根据自身需求调用和判断)

Device	JavaScript Method
Mobile	device.mobile()
Tablet	device.tablet()
Desktop	device.desktop()
iOS	device.ios()
iPad	device.ipad()
iPhone	device.iphone()
iPod	device.ipod()
Android	device.android()
Android Phone	device.androidPhone()
Android Tablet	device.androidTablet()
BlackBerry	device.blackberry()
BlackBerry Phone	device.blackberryPhone()
BlackBerry Tablet	device.blackberryTablet()
Windows	device.windows()
Windows Phone	device.windowsPhone()
Windows Tablet	device.windowsTablet()
Firefox OS	device.fxos()
Firefox OS Phone	device.fxosPhone()
Firefox OS Tablet	device.fxosTablet()
MeeGo	device.meego()
Television	device.television()

DEVICE SUPPORT

iOS: iPhone, iPod, iPad

Android: Phones & Tablets

Blackberry: Phones & Tablets

Windows: Phones & Tablets

Firefox OS: Phones & Tablets

js分别判断手机、电脑、iPad