vue中如何将H5写到PC端中-iframe

本文链接：https://blog.csdn.net/m0_64207574/article/details/125446535

最近接了个新需求，将H5的页面写道PC端中

方法1

vue中的public有一个index.html文件了，而且适配已经写好，所以在不动适配的情况下使用一个iframe的元素进行PC插入另一个index-pc.html文件

话不多说，直接上代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
    <link rel="icon" href="">
    <title>H5变PC端</title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      .hidden-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .hidden-scroll::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .iframe {
        position: fixed;
        width: 375px;
        height: 750px;
        left: 50%;
        margin-left: -187.5px;
      }
    </style>
  </head>
  <body>
    <div class="iframe hidden-scroll">
      <iframe src="./index.html" frameborder="0" style="width: 100%; height: 100%;"></iframe>
    </div>
  </body>
</html>

这里主要用了滚动框和使用iframe引入public中的index的html文件。然后写好对应的css样式即可

注意，进入的时候只能使用pc端的链接进入，原链接进不了

方法2：直接在main.js中使用判断进行字符串替换跳转即可，前提是基于方法1的基础上

在main.js中，最后加入移动端或者PC端的判断，从而进行对应的页面跳转

获取对应的网址然后使用replace将对应的html字符串替换跳转即可

if (判断是不是PC端) {
let url = location.href.replace('index-pc.html', 'index.html')
location.href = url
}

坑：1，不要再index.vue中的生命周期里面写判断，会一直死循环跳转链接

2，不要改适配，移动端会崩，

3，不要用媒体查询或者外层包个div，虽然可以解决，但是要写很多css数据，反正我比较拒绝