vue项目在加载的时候根据设备自动跳转至移动/pc页面

最新推荐文章于 2023-05-15 18:38:08 发布

原创最新推荐文章于 2023-05-15 18:38:08 发布 · 822 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在项目中实现URL重定向的方法，通过检测用户代理来判断设备类型，从而将移动端用户重定向至适配的页面。代码示例展示了如何在index.html文件中使用JavaScript进行条件判断并执行重定向。

在项目的index.html文件title标签下面添加方法

<script>
    (function(ua){
      var __im = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/.test(ua);
      var __iw = /Windows NT/.test(ua);
      var __it = 'ontouchstart' in document.documentElement && !__iw;
      var __ia = /PconeAPP/.test(ua);
      var __is = /(iPad|iPhone)/.test(ua) && /Safari/.test(ua) && !/CriOS/.test(ua);
      var __me = __is ? 'assign' : 'replace';
      __im = __im || __it || __ia;
     
      if (!__im) {
        //如果不是移动端
          location[__me](location.href.replace(/http:\/\/172.11.111.11:2222/i, location.protocol + '//172.22.222.225:1234'));
          //                                              移动端地址                                    pc端地址
      } 
  }(navigator.userAgent));
  </script>

注意：需要将index.js中的host改成本机的ip地址