?

優(yōu)化Vue項(xiàng)目，部署Vue項(xiàng)目

項(xiàng)目?jī)?yōu)化

添加進(jìn)度條

nprogress 進(jìn)度條官方文檔傳送門

打開?vue-ui?面板，選擇依賴，輸入?nprogress?進(jìn)行安裝相關(guān)依賴。

npm

Javascript

npm install --save nprogress

在?main.js?入口文件中，進(jìn)行相關(guān)配置。首先先導(dǎo)入包對(duì)應(yīng)的js?和?css：

Javascript

// 導(dǎo)入NProgress包對(duì)應(yīng)的js和css import NProgress from 'nprogress' import 'nprogress/nprogress.css'

配置?request?請(qǐng)求攔截器 和?response?響應(yīng)攔截器，這樣我們就能在每次網(wǎng)絡(luò)請(qǐng)求時(shí)能夠展示進(jìn)度條了。

Javascript

// 在 request 攔截器中，顯示進(jìn)度條 NProgress.start() // 設(shè)置axios請(qǐng)求攔截器 axios.interceptors.request.use(config => {NProgress.start()config.headers.Authorization = window.sessionStorage.getItem('token')// console.log(config)return config }) // 在 response 攔截器中，隱藏進(jìn)度條 NProgress.done() axios.interceptors.response.use(config => {NProgress.done()return config })

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。