1.检测设备类型,移动设备自动跳转到移动端页面

.env.development

@@ -50,3 +50,6 @@ VUE_APP_PRODUCTIVITY_PLATFORM_URL=http://127.0.0.1:8080/#/home/index
 # 只有以VUE_APP_开头的变量才会被webpack.DefinePlugin静态嵌入到客户端侧的包中
 
 VUE_APP_WEBSOCKET = ws://127.0.0.1:8088/api/ws
+
+# 移动端地址
+VUE_APP_MOBILE = http://127.0.0.1:9519/#/index/home/index

src/App.vue

@@ -4,30 +4,43 @@
   </div>
 </template>
 <script>
-  export default {
-    name: 'App',
-    provide (){
-      return {
-        reload:this.reload,
-      }
+export default {
+  name: 'App',
+  provide() {
+    return {
+      reload: this.reload,
+    };
+  },
+  data() {
+    return {
+      isRouterAlive: true,
+    };
+  },
+  created() {
+    // 在组件创建时检测设备类型
+    this.detectDeviceType();
+  },
+  methods: {
+    reload() {
+      this.isRouterAlive = false;
+      this.$nextTick(function () {
+        this.isRouterAlive = true;
+      });
+      //this.noreadCounts()
     },
-    data(){
-      return {
-        isRouterAlive:true,
+    // 监听访问网页的设备类型
+    detectDeviceType() {
+      const userAgent = navigator.userAgent;
+      // 判断是否是移动端设备的一般方法
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+      if (isMobile) {
+        // 跳转到移动端
+        window.location.replace(process.env.VUE_APP_MOBILE);
       }
     },
-    methods:{
-      reload (){
-        this.isRouterAlive = false
-        this.$nextTick(function(){
-          this.isRouterAlive = true
-        })
-        //this.noreadCounts()
-      },
-    },
-    components:{
-    }
-  }
+  },
+  components: {},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -45,9 +58,8 @@
       color: #42b983;
     }
   }
-
 }
-.el-table th.gutter{
-  display: table-cell!important;
+.el-table th.gutter {
+  display: table-cell !important;
 }
 </style>