项目优化
添加进度条
打开 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 })