vue 3 项目配置首屏加载进度条需用 nprogress 在路由跳转开始时调用 start()、结束时调用 done(),通过 minimum、speed 等参数优化体验,配合样式引入与全局配置实现无闪烁的虚拟进度反馈。

Vue 3 项目配置首屏加载进度条,核心是用 NProgress 在路由跳转开始时启动、结束时收尾,并配合合理配置避免闪烁或误触发。它不依赖真实加载时间,而是通过“虚拟进度”提供即时视觉反馈,解决白屏等待感。
安装与基础引入
执行安装命令(推荐 pnpm):
pnpm add nprogress-
pnpm add -D @types/nprogress(TypeScript 项目必需)
在项目入口或路由配置前引入样式和库:
-
import 'nprogress/nprogress.css'—— 必须,否则无样式 import NProgress from 'nprogress'
全局配置关键参数
在 src/utils/progress.ts 或 router/index.ts 中调用 NProgress.configure(),重点设以下几项:

