nuxt是没有index.html页面的, 咱们应该在哪里写js代码来判断设备呢, 下面请看我的代码吧

1. 引入middleware中间件

• 在nuxt.config.js里通过router来引入middleware中间件

nuxt.config.js代码如下

export default {
    router: {
        middleware: ["device"],
    },
}

2. 在根目录新建utils文件并且新建文件deviceType.js

deviceType.js文件代码如下

/**
 *
 * @param {*} UA ,就是userAgent
 * @returns  type: 设备类型
 *           env: 访问环境(微信/微博/qq)
 *           masklayer: 就是给外部拿到判断是否显示遮罩层的,一些特殊环境要引导用户到外部去打开访问
 */
function isWechat(UA) {
    return /MicroMessenger/i.test(UA) ? true : false;
}

function isWeibo(UA) {
    return /Weibo/i.test(UA) ? true : false;
}

function isQQ(UA) {
    return /QQ/i.test(UA) ? true : false;
}

function isMoible(UA) {
    return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA) ?
        true :
        false;
}

function isIOS(UA) {
    return /iPhone|iPad|iPod/i.test(UA) ? true : false;
}

function isAndroid(UA) {
    return /Android/i.test(UA) ? true : false;
}
export function deviceType(UA) {
    if (isMoible(UA)) {
        if (isIOS(UA)) {
            if (isWechat(UA)) {
                return {
                    type: "ios",
                    env: "wechat",
                    masklayer: true,
                };
            }
            if (isWeibo(UA)) {
                return {
                    type: "ios",
                    env: "weibo",
                    masklayer: true,
                };
            }
            if (isQQ(UA)) {
                return {
                    type: "ios",
                    env: "qq",
                    masklayer: true,
                };
            }
            return {
                type: "ios",
            };
        }
        if (isAndroid(UA)) {
            if (isWechat(UA)) {
                return {
                    type: "android",
                    env: "wechat",
                    masklayer: true,
                };
            }
            if (isWeibo(UA)) {
                return {
                    type: "android",
                    env: "weibo",
                    masklayer: true,
                };
            }
            if (isQQ(UA)) {
                return {
                    type: "android",
                    env: "qq",
                    masklayer: true,
                };
            }
            return {
                type: "android",
            };
        }
        return {
            type: "mobile",
        };
    } else {
        return {
            type: "pc",
        };
    }
}

3. 在middleware里添加device.js文件

device.js代码如下

// @ts-nocheck
import { deviceType } from "~/utils/deviceType";
export default function(context) {
    // @ts-ignore
    context.userAgent = process.server ?
        context.req.headers["user-agent"] :
        navigator.userAgent;
    // 给全局上下文添加一个属性来保存我们返回的匹配信息
    context.deviceType = deviceType(context.userAgent);
    // 这里注入到store,是因为我部分页面需要判断机型请求不同的数据,
    // 你们没有用到的话可以移除
    // context.store.commit("SetDeviceType", context.deviceType);
    // 若是判断UA非移动端的,就在这里做处理了..
    // context.redirect(status,url) 这个可以重定向到外部网站
    // 若是内部访问可以直接用router对象push
    if (context.deviceType.type === "pc") {
        // context.redirect(302,'www.huanjingwuyou.com')    //301是永久重定向，如果你想随着设备类型改变一直变，请改为302
    } else {
        context.redirect(302,'m.huanjingwuyou.com')    //301是永久重定向，如果你想随着设备类型改变一直变，请改为302
    }
}

4. 关于nuxt的基础文档请点一下链接

• nuxt爬坑