Vue3 + TS 实现同一项目同一链接，pc端打开是web应用，手机打开是H5应用

前言： 

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