Nuxt3 优雅地在一个项目中集成 PC 端、移动端多套页面

composables/useDeviceType.ts 判断设备类型

ts 复制代码
import { useRequestEvent } from '#app';

export const useDeviceType = () => {
    const event = useRequestEvent();
    let UA: string
    if (process.client) {
        // 如果是在客户端执行,则通过 navigator 获取 user-agent
        UA = navigator.userAgent
    } else {
        // 如果是在服务端执行,则通过请求头获取 user-agent
        UA = useRequestHeader('user-agent') as string
    }
    const type = ref<'mobile' | 'pc'>('pc');
    const sysType = ref<'ios' | 'android'>('android');

    // 通过 UA 来判断设备类型是 pc 还是 mobile
    const mobileRegex = /Mobile|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
    let isMobile = mobileRegex.test(UA);
    if (window?.location?.href.includes('//m') ||
        window?.location?.href.includes('//testm') ||
        (event?.context?.siteConfigNitroOrigin.includes('//m') ||
            event?.context?.siteConfigNitroOrigin.includes('//testm'))
    ) {
        isMobile = true;
    }
    if (isMobile) {
        type.value = 'mobile'
    }

    console.log(type.value, 'type.value useDeviceType')

    const iosRegex = /iPhone|iPod|iPad|iPod/i;
    if (iosRegex.test(UA)) {
        sysType.value = 'ios'
    } else {
        sysType.value = 'android'
    }
    return { type, sysType }
}

app/router.options.ts

ts 复制代码
import type { RouterConfig } from '@nuxt/schema';

// 导出路由配置项
export default <RouterConfig>{
    routes: (_routes) => {
        // 思路是这样的:
        // 如果是移动端访问,则给移动端页面删除路由前缀 /mobile ,给PC端页面添加路由前缀 /pc
        // 如果是 PC 端访问,则给 PC 端页面删除路由前缀 /pc ,给移动端页面添加路由前缀 /mobile

        // 当前设备的类型
        // const targetType: string = (useRuntimeConfig().public.deviceType || 'pc') as string;
        // const targetType: useDeviceType().value;
        const deviceType = useDeviceType();
        if (window?.location?.href.includes('//m') || window?.location?.href.includes('//testm')) {
            deviceType.type.value = 'mobile'
        }
        let targetType = deviceType?.type.value; // 默认为 'pc'
        console.log('window router', window)
        console.log('targetType router', targetType)
        if(!targetType) return [];
        // 不是当前设备类型的另一个类型
        const notTargetType = targetType === 'mobile' ? 'pc' : 'mobile'

        // 找到匹配当前设备的所有页面路由
        let targetRoutes = _routes.filter(item => (item?.name as string)?.startsWith(targetType))
        targetRoutes = targetRoutes.map((item) => {
            // 将路由前缀删除
            item.path = item.path.replace(`/${targetType}`, '') === '' ? '/' : item.path.replace(`/${targetType}`, '')
            // 如果 PC 端、移动端 分别使用的是两套 layout,可以使用下面这段代码去指定布局
            // if (!item.meta?.layout) {
            //   item.meta = {
            //     ...item.meta,
            //     layout: `/${targetType}` === '/mobile' ? '移动端布局名' : 'PC 端布局名',
            //   }
            // }
            return item
        })

        // 找到不匹配当前设备的所有页面路由
        let notTargetRoutes = _routes.filter(item => (item?.name as string)?.startsWith(notTargetType))
        notTargetRoutes = notTargetRoutes.map((item) => {
            // 将路由前缀添加上
            if (!item.path.startsWith(`/${notTargetType}`))
                item.path = `/${notTargetType}${item.path}`
            return item
        })

        console.log('targetRoutes', targetRoutes)
        console.log('notTargetRoutes', notTargetRoutes)

        return [...targetRoutes, ...notTargetRoutes]
    },
}

代码来自: Nuxt3 优雅地在一个项目中集成 PC 端、移动端多套页面

相关推荐
web打印社区24 分钟前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗25 分钟前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长35 分钟前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅2 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_2 小时前
Chrome开发者工具
前端·chrome
YiHanXii2 小时前
this 输出题
前端·javascript·1024程序员节
楊无好2 小时前
React中ref
前端·react.js
程琬清君2 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1002 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔662 小时前
flutter实现web端实现效果
前端·flutter