前端学习（2735）：重读vue电商网站45之项目优化上线

最新推荐文章于 2022-06-07 10:01:01 发布

前端小歌谣

最新推荐文章于 2022-06-07 10:01:01 发布

阅读量1.3k

点赞数 28

分类专栏： # 歌谣--前端学习--vue2电商管理系统 # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/110789091

版权

歌谣--前端学习--总进程同时被 2 个专栏收录

2758 篇文章 59 订阅

订阅专栏

歌谣--前端学习--vue2电商管理系统

56 篇文章 6 订阅

订阅专栏

优化Vue项目，部署Vue项目

项目优化

添加进度条

nprogress 进度条官方文档传送门

打开 vue-ui 面板，选择依赖，输入 nprogress 进行安装相关依赖。

npm

Javascript

npm install --save  nprogress

在 main.js 入口文件中，进行相关配置。首先先导入包对应的js 和 css：

Javascript

// 导入NProgress包对应的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

配置 request 请求拦截器和 response 响应拦截器，这样我们就能在每次网络请求时能够展示进度条了。

Javascript

// 在 request 拦截器中，显示进度条 NProgress.start()
// 设置axios请求拦截器
axios.interceptors.request.use(config => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // console.log(config)
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})