当前位置：首页 > news >正文

[Vue 配置] Vite + Vue3 项目配置和使用 NProgress

news 2025/8/21 12:07:42

文章归档：https://www.yuque.com/u27599042/coding_star/mfmsrf9tz98ox3qg

安装

pnpm i nprogress

配置 NProgress

其他更多可参考，仓库地址：https://github.com/rstacruz/nprogress

在 src/config/nprogress.js 中进行配置

是否展示右上角圆圈加载动画

NProgress.configure({ showSpinner: false
});

设置样式

src/styles/nprogress.css

#nprogress .bar {/* 自定义进度条颜色 */background: #fa2c19 !important;
}#nprogress .peg {/* 自定义进度条阴影颜色 */box-shadow: 0 0 10px #fa2c19, 0 0 5px #fa2c19 !important;
}

启动时进度的最小百分比

默认 0.08

NProgress.configure({ minimum: 0.1
});

进度条动画和速度

动画可选值：

linear：动画从开始到结束保持相同的速度。
ease：默认值，动画有一个缓慢的开始，然后加速，在结束之前又变慢。
ease-in：动画有一个缓慢的开始。
ease-out：动画有一个缓慢的结束。
ease-in-out：动画有一个缓慢的开始和一个缓慢的结束。
cubic-bezier(n,n,n,n)：在三次贝塞尔（cubic-bezier）函数中定义自己的值。可以是从 0 到 1 之间的数字值。

NProgress.configure({ easing: 'ease', speed: 500
});

关闭自动递增

默认 true

NProgress.configure({ trickle: false
});

进度条递增速度

单位毫秒，多久自动递增一次

NProgress.configure({ trickleSpeed: 200
});

指定父容器

默认 body

NProgress.configure({ parent: '#container'
});

引入

在 main.js 中引入 nprogress 配置和样式

import "nprogress/nprogress.css" // nprogress 样式
import "@/styles/nprogress.css" // 自定义修改 nprogress 
import '@/config/nprogress.js' // nprogress 配置

使用

// 在需要使用的地方导入
import NProgress from 'nprogress'// 开启进度条
NProgress.start()// 结束进度条
NProgress.done()// 设置进度条百分比，n 取值 0 - 1
NProgress.set(n)// 获取进度条状态
NProgress.status()// 增加进度条进度，但不会到 100%，n 取值 0 - 1
NProgress.inc(n);

vue router 中使用

// 全局前置守卫
router.beforeEach(async(to, from, next) => {// 开启进度条NProgress.start();
}// 全局后置守卫
router.afterEach(() => {// 结束进度条NProgress.done();
});

axios 中使用

//请求拦截器
instance.interceptors.request.use((config) => {// 开启进度条NProgress.start();//...},(error) =>{// 结束进度条NProgress.done();//...}
);//响应拦截器
instance.interceptors.response.use((response) => {//响应成功// 结束进度条NProgress.done();//...},(error) => {// 结束进度条NProgress.done();//...}
);