vue項目依賴升級報錯處理

1.Vue Router 升級到3.5.1報錯：Navigation cancelled from "/login" to "/" with a new navigation

原因：Vue Router內部報錯沒有進行catch處理導致的編程式導航跳轉問題,往同一地址跳轉時會報錯，push和replace 都會導致這個情況的發(fā)生

import Vue from 'vue'
import VueRouter from 'vue-router';
?
Vue.use(Router)
//解決Vue Router在3.0版本以上push重復點擊報錯
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
? ? if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
? ? return originalPush.call(this, location).catch(err => err)
}

//解決Vue Router在3.0版本以上replace重復重定向報錯
const originalPushs = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(location, onResolve, onReject) {
? ? if (onResolve || onReject) return originalPushs.call(this, location, onResolve, onReject)
? ? return originalPushs.call(this, location).catch(err => err)
}

Vue.use(VueRouter);

2.依賴升級后遇到的問題由autoprefixer版本引起的 warning：

Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules

解決方法：

// 將樣式中像下面的寫法
/* autoprefixer: off */
....
/* autoprefixer: on */
// 改為
?? ?
/* autoprefixer: ignore next */

3.編譯器報: start value has mixed support, consider using flex-start instead

start值具有混合支持，請考慮改用flex-start

解決方法：

全局ctrl+F搜索align-items: start;改為align-items: flex-start;

全局ctrl+F搜索justify-content: start;改為justify-content: flex-start;

4.編譯器報: end value has mixed support, consider using flex-end instead

解決方法：

全局ctrl+F搜索align-items: end;改為align-items: flex-end;

全局ctrl+F搜索justify-content: end;改為justify-content: flex-end;

當啟動vue項目安裝依賴時報錯

當啟動vue項目安裝依賴時報錯暫時想到四個原因：

1.node版本低，升級到新版本

2.執(zhí)行npm cache clean，再重新npm install

3.如果是下載依賴包失敗的話，可以使用cnpm淘寶鏡像下載，或者yarn下載安裝

4.報錯一般都會有錯誤提示，根據錯誤提示進行操作 

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論