update

src/App.vue

@@ -2,16 +2,22 @@
 import { RouterView } from "vue-router";
 import { onMounted } from 'vue'
 onMounted(() => {
-  window.addEventListener("resize", ()=>{
-    heightTemp.value = (window.innerHeight)+"px";
-    document.getElementById("app").style.height = heightTemp.value;
-  });
-  window.addEventListener("DOMContentLoaded", ()=>{
-    heightTemp.value = (window.innerHeight)+"px";
-    document.getElementById("app").style.height = heightTemp.value;
-  });
-})
 
+})
+onMounted(() => {
+  //首先我们获得视口高度并将其乘以1%以获得1vh单位的值
+  let vh = window.innerHeight * 0.01
+  // 然后，我们将——vh自定义属性中的值设置为文档的根
+  document.documentElement.style.setProperty('--vh', `${vh}px`)
+
+  // 我们监听resize事件 视图大小发生变化就重新计算1vh的值
+  window.addEventListener('resize', () => {
+    // 我们执行与前面相同的脚本
+    let vh = window.innerHeight * 0.01
+    console.log(vh);
+    document.documentElement.style.setProperty('--vh', `${vh}px`)
+  })
+})
 </script>
 
 <template>

src/layouts/MainLayout.vue

@@ -16,6 +16,7 @@ import Sidebar from '../components/Sidebar.vue'
 .main-layout {
   display: flex;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   /* min-width: 640px; */
   overflow: hidden; /* 防止内部滚动影响布局 */
 }