前言：
我自己搭建的项目基本都是用 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端和移动端的适配+判断设备
