添加404页面样式和访问路由的问题

dev-dist/sw.js

@@ -67,7 +67,7 @@ if (!self.define) {
     });
   };
 }
-define(['./workbox-42eaa92f'], (function (workbox) { 'use strict';
+define(['./workbox-16108a29'], (function (workbox) { 'use strict';
 
   self.addEventListener('message', event => {
     if (event.data && event.data.type === 'SKIP_WAITING') {
@@ -85,19 +85,12 @@ define(['./workbox-42eaa92f'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.gc7me3v0fio"
+    "revision": "0.3ahmnbktjto"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
+    allowlist: [/^\/$/],
+    denylist: [/^\/classroom/]
   }));
-  workbox.registerRoute(/^https:\/\/dev\.kt\.colexiu\.com\/classroom\/.+/, new workbox.NetworkOnly({
-    "cacheName": "bypass-classroom",
-    plugins: []
-  }), 'GET');
-  workbox.registerRoute(/^https:\/\/kt\.colexiu\.com\/classroom\/.+/, new workbox.NetworkOnly({
-    "cacheName": "bypass-classroom",
-    plugins: []
-  }), 'GET');
 
 }));

src/views/404/index.module.less

@@ -0,0 +1,32 @@
+.page-404 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+
+  img {
+    margin-top: -6%;
+    width: 272Px;
+    height: 227Px;
+  }
+
+  .tip {
+    font-size: 16Px;
+    color: #999999;
+    line-height: 22Px;
+    text-align: center;
+    padding-top: 16Px;
+    padding-bottom: 22Px;
+  }
+
+  .backBtn {
+    height: 32Px;
+    border-radius: 6Px;
+    padding: 0 20Px;
+    font-weight: 600;
+    font-size: 14Px;
+    color: #198CFE;
+    line-height: 20Px;
+  }
+}

src/views/404/index.tsx

@@ -1,23 +1,28 @@
-import { defineComponent } from 'vue';
-import { NEmpty, NButton } from 'naive-ui';
-
-export default defineComponent({
-  name: '404-page',
-  setup() {
-    return () => (
-      <div
-        style={{
-          height: '220px',
-          'margin-top': '150px',
-          'padding-top': '30px',
-          'font-size': '15px',
-          'text-align': 'center'
-        }}>
-        <NEmpty description="你访问的页面不见了，你还可以" size="large" />
-        <NButton type="primary" text>
-          返回上一页
-        </NButton>
-      </div>
-    );
-  }
-});
+import { defineComponent } from 'vue';
+import { NButton } from 'naive-ui';
+import png404 from './404.png';
+import styles from './index.module.less';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  name: '404-page',
+  setup() {
+    const router = useRouter();
+    return () => (
+      <div class={styles['page-404']}>
+        <img src={png404} />
+        <p class={styles.tip}>页面找不到了</p>
+        <NButton
+          type="primary"
+          ghost
+          class={styles.backBtn}
+          onClick={() => {
+            // 返回首页
+            router.replace('/');
+          }}>
+          返回
+        </NButton>
+      </div>
+    );
+  }
+});

vite.config.ts

@@ -68,7 +68,8 @@ export default defineConfig(() => {
         includeAssets: ['./logo.png'],
         workbox: {
           skipWaiting: false, // 强制跳过等待
-          clientsClaim: false // 让新的 Service Worker 立即控制所有页面
+          clientsClaim: false, // 让新的 Service Worker 立即控制所有页面
+          navigateFallbackDenylist: [/^\/classroom/] // 避免在路由中使用 navigateFallback 时，导致路由无法正常跳转
         },
         manifest: {
           name: '酷乐秀-音乐数字课堂',