【Vue项目美化】NProgress顶部进度条详细配置

原创

已于 2022-11-03 11:07:39 修改 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #nprogress #原力计划

于 2022-11-03 10:59:48 首次发布

本文介绍如何在Vue项目中使用NProgress插件配置顶部进度条，包括axios请求及路由拦截器的进度条显示与关闭，同时提供自定义进度条样式的指导。

【Vue项目美化】NProgress顶部进度条详细配置

废话不多说，先上效果图

一、axios请求配置进度条

找到自己项目下的 request.js文件

import axios from 'axios';
import NProgress from 'nprogress' // 引入nprogress插件 
import 'nprogress/nprogress.css' // 引入 nprogress 样式
NProgress.configure({
   
    showSpinner: false }) // 取消 NProgress 的右上角螺旋加载提示

let baseURL = 
  process.env.NODE_ENV == 'production' ? 'http://192.168.0.1' : 'http