?

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

總結

以上是生活随笔為你收集整理的前端学习（2735）：重读vue电商网站45之项目优化上线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。