前端學習（2735）：重讀vue電商網站45之項目優化上線

 

優化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
})