huangzd1997
f1fa5f7adf
lazy-config 暴露 loading 延迟/超时/文案与懒加载判定；lazy-page 用 defineAsyncComponent 提供 loading/error 组件，router 对所有注册路由统一包裹； main.css 增加 .page-loading/.page-error 兜底样式。
24 lines
807 B
TypeScript
24 lines
807 B
TypeScript
import { defineAsyncComponent, h, type Component } from 'vue'
|
|
import {
|
|
PAGE_LOADING_DELAY,
|
|
PAGE_LOADING_TEXT,
|
|
PAGE_LOADING_TIMEOUT,
|
|
PAGE_LOAD_ERROR_TEXT,
|
|
} from './lazy-config'
|
|
|
|
type PageLoader = () => Promise<{ default: unknown }>
|
|
|
|
/**
|
|
* 页面级异步加载边界（任务 10）：按路由分包页面，加载中/失败都有明确反馈，
|
|
* 不把 chunk 加载错误静默吞掉。
|
|
*/
|
|
export function defineLazyPage(loader: PageLoader): Component {
|
|
return defineAsyncComponent({
|
|
loader: () => loader().then((mod) => mod.default as Component),
|
|
delay: PAGE_LOADING_DELAY,
|
|
timeout: PAGE_LOADING_TIMEOUT,
|
|
loadingComponent: () => h('div', { class: 'page-loading' }, PAGE_LOADING_TEXT),
|
|
errorComponent: () => h('div', { class: 'page-error' }, PAGE_LOAD_ERROR_TEXT),
|
|
})
|
|
}
|