fix: 修复部署后切换页面 JS chunk 404 白屏问题
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 2m22s
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:
@@ -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)
|
||||
|
||||
29
src/components/core/others/ChunkErrorBoundary.vue
Normal file
29
src/components/core/others/ChunkErrorBoundary.vue
Normal 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>
|
||||
10
src/main.ts
10
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')
|
||||
|
||||
|
||||
Reference in New Issue
Block a user