update: 通过动态组件解决全屏页加载了非页面组件占用内存开销和加载速度及解决刷新隐私页会闪烁页头页脚的用户体验问题；因为页面布局使用了动态编译，所以vite配置开发环境运行时编译；删除登录页面打印验证码图片，后续添加生产环境自动移除注释和打印。

components.d.ts

@@ -8,6 +8,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BasicLayout: typeof import('./src/components/BasicLayout.vue')['default']
+    DynamicLayout: typeof import('./src/components/DynamicLayout.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']

src/App.vue

@@ -1,53 +1,13 @@
 <template>
-  <template v-if="!isFullpage">
+  <DynamicLayout>
-    <div>
+    <router-view />
-    <HeadMenu @open-login-form="showLoginForm = true" @open-register-form="showRegisterForm = true" />
+  </DynamicLayout>
-    <div class="contain">
-      <router-view class="routerView" />
-      <Feedback/>
-      <Footer/>
-    </div>
-  </div>
-  <Login :isVisible="showLoginForm" @close-login-form="showLoginForm = false" />
-  <Register :isVisible="showRegisterForm" @close-register-form="showRegisterForm = false" />
-  </template>
-  <template v-else>
-    <router-view class="routerView" />
-  </template>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue';
+import DynamicLayout from '@/components/DynamicLayout.vue';
-import { useRoute } from 'vue-router';
-
-import HeadMenu from '@/views/HeadMenu.vue';
-
-import Footer from '@/views/Footer.vue';
-import Login from '@/components/login.vue';
-import Register from '@/components/register.vue'; 
-import Feedback from './components/floatingMenu.vue';
-
-const route = useRoute();
-
-const showLoginForm = ref(false);
-const showRegisterForm = ref(false); // 定义控制注册组件显示的变量
-const fullpageRef = ref<boolean>(true);
-
-// 计算属性：根据当前路由的 meta 决定是否显示页头页脚
-const isFullpage = computed(() => {
-  return route?.meta?.isFullpage || false;
-});
-
-fullpageRef.value = isFullpage.value as boolean
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.contain {
+
-  min-height: calc(100vh - 70px);
-  display: flex;
-  flex-direction: column;
- .routerView {
-    flex: 1;
-  }
-}
 </style>

src/components/BasicLayout.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+      <HeadMenu @open-login-form="showLoginForm = true" @open-register-form="showRegisterForm = true" />
+      <div class="contain">
+        <slot />
+        <Feedback/>
+        <Footer/>
+      </div>
+    </div>
+    <Login :isVisible="showLoginForm" @close-login-form="showLoginForm = false" />
+    <Register :isVisible="showRegisterForm" @close-register-form="showRegisterForm = false" />
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue';
+  
+  import HeadMenu from '@/views/HeadMenu.vue';
+  
+  import Footer from '@/views/Footer.vue';
+  import Login from '@/components/login.vue';
+  import Register from '@/components/register.vue'; 
+  import Feedback from '@/components/floatingMenu.vue';
+  
+  const showLoginForm = ref(false);
+  const showRegisterForm = ref(false); // 定义控制注册组件显示的变量
+  </script>
+  
+  <style lang="scss">
+  .contain {
+    min-height: calc(100vh - 70px);
+    display: flex;
+    flex-direction: column;
+   .routerView {
+      flex: 1;
+    }
+  }
+  </style>

src/components/DynamicLayout.vue

@@ -0,0 +1,22 @@
+<template>
+    <component :is="currentLayout">
+      <slot />
+    </component>
+  </template>
+  
+  <script lang="ts" setup>
+  import { watch, shallowRef } from 'vue';
+  import { useRoute } from 'vue-router';
+  
+  const route = useRoute();
+  const currentLayout = shallowRef(null);
+
+  watch(route, async(newVal)=>{
+    if (typeof newVal?.meta?.isFullpage == 'undefined' || newVal?.meta?.isFullpage == false) {
+      const layout = await import('@/components/BasicLayout.vue');
+      currentLayout.value = layout.default;
+    } else {
+      currentLayout.value = { template: '<slot />' };
+    }
+  })
+  </script>

src/components/floatingMenu.vue

@@ -56,9 +56,9 @@ window.onscroll = function () {
   // 获取浏览器卷去的高度
   let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器
   if (high >= 900) {
-    backToTop.value.style.display = "block";
+    backToTop.value && (backToTop.value.style.display = "block")
   } else {
-    backToTop.value.style.display = "none";
+    backToTop.value && (backToTop.value.style.display = "none")
   }
 };
 

src/components/login.vue

@@ -67,8 +67,6 @@ const refreshCaptcha = async () => {
     const res = await GetVerifyCode({ verify_token: verify_token.value });
     if (res && res.status === 200) {
         captchaUrl.value = `https://mall.gpxscs.cn/api/admin/shop/shop-base-config/image?verify_token=${verify_token.value}`;
-    } else {
-        console.log("获取图形验证码失败", res);
     }
 };
 

vite.config.ts

@@ -62,7 +62,8 @@ export default defineConfig({
 ,
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      'vue': 'vue/dist/vue.esm-bundler.js'
     },
   },
   // build: {