vue项目依赖升级报错处理方式

 更新时间:2022年08月24日 09:55:05   作者:清风明月的博客  
这篇文章主要介绍了vue项目依赖升级报错处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue项目依赖升级报错处理

1.Vue Router 升级到3.5.1报错:Navigation cancelled from "/login" to "/" with a new navigation

原因:Vue Router内部报错没有进行catch处理导致的编程式导航跳转问题,往同一地址跳转时会报错,push和replace 都会导致这个情况的发生

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.执行npm cache clean,再重新npm install

3.如果是下载依赖包失败的话,可以使用cnpm淘宝镜像下载,或者yarn下载安装

4.报错一般都会有错误提示,根据错误提示进行操作 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    这篇文章主要给大家介绍关于前端Vue3父子组件传参有关sync修饰符的用法详细解析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • elementPlus表格二次封装过程

    elementPlus表格二次封装过程

    我们正常在开发项目中,表格的风格是一致的,但是表格或多或少会有些不同,有些是需要分页,有些是按钮功能不同,有些又需要加Tag,或者对时间进行格式化等,这篇文章主要介绍了elementPlus表格二次封装过程,需要的朋友可以参考下
    2024-07-07
  • Vue.prototype全局变量的实现示例

    Vue.prototype全局变量的实现示例

    在Vue中可以使用Vue.prototype向Vue的全局作用域添加属性或方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • vue项目index.html中使用环境变量的代码示例

    vue项目index.html中使用环境变量的代码示例

    在Vue3中使用环境变量的方式与Vue2基本相同,下面这篇文章主要给大家介绍了关于vue项目index.html中使用环境变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • Vue实现dom元素拖拽并限制移动范围的操作代码

    Vue实现dom元素拖拽并限制移动范围的操作代码

    这篇文章主要介绍了Vue实现dom元素拖拽并限制移动范围的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构,本文实现了树形控件整合带图标的下拉菜单,感兴趣的可以了解一下
    2021-07-07
  • 在vue中使用setInterval的方法示例

    在vue中使用setInterval的方法示例

    这篇文章主要介绍了在vue中使用setInterval的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • moment转化时间戳出现Invalid Date的问题及解决

    moment转化时间戳出现Invalid Date的问题及解决

    这篇文章主要介绍了moment转化时间戳出现Invalid Date的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue 指令与过滤器案例代码

    vue 指令与过滤器案例代码

    这篇文章主要介绍了vue 指令与过滤器,本文通过案例代码给大家详细讲解,给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • Vue实现docx、pdf格式文件在线预览功能

    Vue实现docx、pdf格式文件在线预览功能

    在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件,感兴趣的可以了解一下
    2022-09-09

最新评论