进度条 vue3 vite

NProgress.js 出处：NProgress: slim progress bars in JavaScript

安装方式： 

npm install nprogress

使用方法

import axios from 'axios'
import NProgress from 'nprogress' // 引入NProgress进度条
import 'nprogress/nprogress.css'

const url = process.env.NODE_ENV==='production'? 'xxxx.locaxxxxxxxtion.xxxxx' : 'xxxx://xxxx.xxxxx.com'
const $http = axios.create({
  baseURL: url, // 所有的请求地址前缀部分
  timeout: 60000, // 请求超时时间毫秒
  withCredentials: true, // 异步请求携带cookie
  headers: {
    // 设置后端需要的传参类型
    'Content-Type' : 'application/x-www-form-urlencoded'
  },
})

$http.interceptors.request.use(
  function (config) {
    // 设置加载进度
    NProgress.start() // 设置加载进度条(开始..)
    return config
  },
  function (error) {// 发送失败
   
    return Promise.reject(error)
  }
)


// 添加响应拦截器
$http.interceptors.response.use(
  function (response) {
    // 关闭加载进度
    NProgress.done() // 设置加载进度条(结束..)
    return response
  },
  function (error) {
    return Promise.reject(error)
  }
)