Vue 3 项目怎么配置首屏加载进度条(NProgress)

浅静同学_5171

浅静同学_5171

2026-10-22

554人浏览

原创

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

vue 3 项目怎么配置首屏加载进度条(nprogress)

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(),重点设以下几项:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习