fix: 修复部署后切换页面 JS chunk 404 白屏问题
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 2m22s

- main.ts 监听 vite:preloadError,chunk 加载失败时自动刷新一次
- 新增 ChunkErrorBoundary 组件,捕获 Vue 渲染层 chunk 加载异常
- App.vue 包裹 ChunkErrorBoundary
- docker/nginx.conf 修复缓存策略:index.html 不缓存,/assets/ 长缓存 immutable
This commit is contained in:
2026-04-18 12:24:18 +08:00
parent b48d6a1894
commit fd583e81e0
4 changed files with 57 additions and 12 deletions

View File

@@ -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>