From fd583e81e074c588ba58b7ddb528f72a8b08854d Mon Sep 17 00:00:00 2001
From: huang <youdang2000@gmail.com>
Date: Sat, 18 Apr 2026 12:24:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E7=BD=B2?=
 =?UTF-8?q?=E5=90=8E=E5=88=87=E6=8D=A2=E9=A1=B5=E9=9D=A2=20JS=20chunk=2040?=
 =?UTF-8?q?4=20=E7=99=BD=E5=B1=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- main.ts 监听 vite:preloadError，chunk 加载失败时自动刷新一次
- 新增 ChunkErrorBoundary 组件，捕获 Vue 渲染层 chunk 加载异常
- App.vue 包裹 ChunkErrorBoundary
- docker/nginx.conf 修复缓存策略：index.html 不缓存，/assets/ 长缓存 immutable
---
 docker/nginx.conf                             | 21 ++++++++------
 src/App.vue                                   |  9 ++++--
 .../core/others/ChunkErrorBoundary.vue        | 29 +++++++++++++++++++
 src/main.ts                                   | 10 +++++++
 4 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 src/components/core/others/ChunkErrorBoundary.vue

diff --git a/docker/nginx.conf b/docker/nginx.conf
index 8e6f57d..5fba4e5 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -11,23 +11,26 @@ server {
     gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml;
     gzip_comp_level 6;
 
+    location = /index.html {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
+    }
+
     location /health {
         access_log off;
         return 200 'OK';
         add_header Content-Type text/plain;
     }
 
-    location / {
-        try_files $uri $uri/ /index.html;
-        add_header Cache-Control "no-cache, no-store, must-revalidate";
-        add_header Pragma "no-cache";
-        add_header Expires "0";
+    location /assets/ {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        try_files $uri =404;
+        access_log off;
     }
 
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-        access_log off;
+    location / {
+        try_files $uri $uri/ /index.html;
     }
 
     error_page 404 /index.html;
diff --git a/src/App.vue b/src/App.vue
index e9e9727..5c1dfd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
 <template>
-  <ElConfigProvider size="default" :locale="locales[language]" :z-index="3000">
-    <RouterView></RouterView>
-  </ElConfigProvider>
+  <ChunkErrorBoundary>
+    <ElConfigProvider size="default" :locale="locales[language]" :z-index="3000">
+      <RouterView></RouterView>
+    </ElConfigProvider>
+  </ChunkErrorBoundary>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +15,7 @@
   import { ApiStatus } from './utils/http/status'
   import { setThemeTransitionClass } from '@/utils'
   import { checkStorageCompatibility } from '@/utils'
+  import ChunkErrorBoundary from '@/components/core/others/ChunkErrorBoundary.vue'
 
   const userStore = useUserStore()
   const { language } = storeToRefs(userStore)
diff --git a/src/components/core/others/ChunkErrorBoundary.vue b/src/components/core/others/ChunkErrorBoundary.vue
new file mode 100644
index 0000000..1b7ccae
--- /dev/null
+++ b/src/components/core/others/ChunkErrorBoundary.vue
@@ -0,0 +1,29 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+  import { onErrorCaptured } from 'vue'
+
+  onErrorCaptured((err, instance, info) => {
+    const message = err?.message || ''
+    const isChunkError =
+      message.includes('dynamically imported module') ||
+      message.includes('Failed to fetch') ||
+      message.includes('Loading chunk') ||
+      message.includes('ChunkLoadError') ||
+      message.includes('Unable to preload CSS')
+
+    if (isChunkError) {
+      const key = '__chunk_reload__'
+      if (!sessionStorage.getItem(key)) {
+        sessionStorage.setItem(key, '1')
+        window.location.reload()
+        return false
+      }
+    }
+
+    console.error('[ChunkErrorBoundary]', err, info)
+    return true
+  })
+</script>
diff --git a/src/main.ts b/src/main.ts
index 23817d1..5c6feae 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -34,5 +34,15 @@ app.use(language)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
+
+window.addEventListener('vite:preloadError', event => {
+  event.preventDefault()
+  const key = '__chunk_reload__'
+  if (!sessionStorage.getItem(key)) {
+    sessionStorage.setItem(key, '1')
+    window.location.reload()
+  }
+})
+
 app.mount('#app')