前言： 

        我自己搭建的项目基本都是用 postcss-px-to-viewport 插件进行适配的；

        最近在做一个项目，需求是同样的功能，用户可以在电脑上打开操作使用，也可以在手机上登录进去操作使用，但是跳转链接是同一个；也是查阅了一些资料，实现了相关功能，满足了用户的需求，现在就简单给大家介绍一下，有需要的同学可以借鉴一下。

核心构造：

核心：两套代码资源----pc端与移动端---作为 子组件

                                +

                    判断客户端类型
                                +

        每个路由的入口文件（比如index.vue）---- 作为 父组件

例子：单个页面功能目录结构：下面 具体使用 就以这个目录为根据解析

 

具体使用：

1、路由 --- 以“嘿嘿嘿”为例

export default {path: "/reportOrder",redirect: "/reportOrder/index",meta: {title: "哈哈哈"},children: [{path: "/reportOrder/index",name: "reportOrder",component: () => import("@/views/reportOrder/index.vue"),meta: {title: "嘿嘿嘿",}},{path: "/reportOrder/orderSignIn",name: "orderSignIn",component: () => import("@/views/reportOrder/order.vue"),meta: {title: "噗噗噗",}}]
}

2、封装 判断访问设备类型 方法

/*** @description 判断手机端还是移动端 AppOrPC* @returns {String}*/
export function AppOrPC() {let routes = "routersP";  // pc端if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {routes = "routersM";  // 移动端}return routes;
}

3、 在 父组件中 通过判断设备 动态渲染 pc端与移动端组件

<template><div><!-- pc端 --><template v-if="AppOrPC() == 'routersP'"><pcShow /></template><!-- 移动端 --><template v-else-if="AppOrPC() == 'routersM'"><appShow /></template></div>
</template><script setup lang="ts">
defineOptions({name: "reportOrder"
});
import { AppOrPC } from "@/utils";
import appShow from "./components/homePage/appShow.vue";
import pcShow from "./components/homePage/pcShow.vue";</script>

 还有一种方式是通过 路由守卫 处理的 ，感兴趣的同学可以参考一下这篇文章：

vue3.0 + ts 项目实现pc端和移动端的适配+判断设备