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

目录
  • vue项目依赖升级报错处理
  • 当启动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.报错一般都会有错误提示，根据错误提示进行操作

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue图片裁剪功能实现代码

    Vue图片裁剪功能实现代码

    目录 一.效果展示: 1.表单的图片上传项: 2.裁剪框页面 二.代码部分 1.首先安装Vue-Cropper,基于此组件的基础上开发的裁剪页面 2.裁剪弹窗的组件编写: 3.[图片上传表单项]组件编写 一.效果展示: 1.表单的图片上传项: - 新增时默认一个空白Input框 - 更新时展示以往上传存放的图片, - 点击[查看]浏览完整大小 - 点击[删除]清空src地址,重新上传新照片 2.裁剪框页面 - 先选择裁剪的图片 - 右侧展示裁剪区域 - 支持放大缩小,图片旋转 - 点击[上传图片

  • 如何在vue项目中使用UEditor--plus

    如何在vue项目中使用UEditor--plus

    目录 1:UEditor-plus富文本编辑器如何在vue项目中使用 2.使用方法 3.运行项目 1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,由于该项目不在维护:程序员自发对其进行了维护,详见 https://gitee.com/modstart-lib/ueditor-plus?_from=gitee_search: 2.使用方法 第一步:在git上拉取ueditor代码到本地 第二步:解压后找

  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

  • vue项目中安装less依赖的过程

    目录 vue安装less依赖 一.安装less依赖 二.修改webpack.base.conf.js文件 vue中less知识点总结 安装 变量(Variables) 混合(Mixins) 嵌套(Nesting) 运算(Operations) 转义(Escaping) 函数(Functions) 命名空间和访问符 映射 作用域(Scope) scss和stylus vue安装less依赖 一.安装less依赖 npm install less less-loader --save 二.修改web

  • vue中实现监听数组内部元素

    vue中实现监听数组内部元素

    目录 vue监听数组内部元素 我们有两种办法解决此问题 vue如何监听数组的变化 vue监听数组内部元素 在VUE中,对数组的监听是浅监听,也就是它只能监听到数组的长度或者有无的变化,当我们修改数组中的某一个值时,也就是数组的长度状态并没有改变时,在正常情况下它是无法监听到的,在watch中我们知道可以使用deep属性进行深监听,那么在其他情况下呢? 我们有两种办法解决此问题 1.通过原生的js对数组先进行切割,然后在添加新的内容(也就是我们要修改的内容) array.splice(i, 1,

  • SpringBoot Actuator未授权访问漏洞修复详解

    SpringBoot Actuator未授权访问漏洞修复详解

    目录 1.写在前面 2.问题描述 3.安全问题 4.禁止方法 5.完全禁用Actuator 1.写在前面 目前SpringBoot得框架,越来越广泛,大多数中小型企业,在开发新项目得时候.后端语言使用java得情况下,首选都会使用到SpringBoot. 在很多得一些开源得框架中,例如: ruoyi若以,这些. 不知道是出于什么原因?我们都会在这些框架中得pom文件中找到SpringBoot Actuator的依赖. 嘿,这Actuator估计很多人都没有真真实实使用过,但是就会出现在pom文件

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

    目录 vue项目依赖升级报错处理 当启动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'

  • 解决Vue项目中tff报错的问题

    在webpack.config.js中的模块配置中加如下的配置规则: {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"} const path = require('path'); const htmlWebpackplugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); modu

  • 用electron打包vue项目中的报错问题及解决

    用electron打包vue项目中的报错问题及解决

    目录 1.  首先一定要cd到项目的根目录 2.  接下来运行 如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应用文件exe 这里,也要提到实际项目中的问题,可能有同志的目录结构和内容有些许差别,就我刚刚遇到的问题来说,常见的问题的有几个问题,以及解决办法如下: 1.  首先一定要cd到项目的根目录 (我这里是app)里面才能运行项目,再重新npm run build,不然的话很有可能出现 “ 系统找不到路径的问题 ”,成功的话会出现下面绿

  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    目录 react项目升级报错,babel报错,.babelrc配置兼容问题 遇到问题 最终解决方案 react运行报错TypeError 现记录一下思路 react项目升级报错,babel报错,.babelrc配置兼容问题 由于开发环境和项目版本的兼容问题,尝试升级了react-scripts后,一大堆问题接踵而至,翻遍了百度和csdn,往往解决了旧的又出现新的,或者开发没问题而打包时报错,现罗列一下遇到的主要问题和最终解决方案,以供参考. 遇到问题 digital envelope routi

  • Vue3+Element-plus项目自动导入报错的解决方案

    Vue3+Element-plus项目自动导入报错的解决方案

    目录 前言 安装步骤 1.安装插件 2.vue.config.js 设置 3.npm run serve 出错 解决方案 1.问题原因 1.1 unimport 包报错 1.2 node.js 和 npm 版本过低 2.解决方法 2.1 降低 unplugin-auto-import 插件版本 2.2 升级 node.js 和 npm 版本 补充:element-plus自动按需导入及出错解决 总结 前言 在创建 Vue3 + Element-plus 项目时,根据 Element-plus 文

  • vue3.2 Composition API项目依赖升级

    目录 第一次Composition API 思考setup 最常见的问题,忘记写.value style v-bind 的优缺点 pinia or not 第一次Composition API 在vue3.2中,正式支持了script setup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法. 在vue3.2之前,一般会这样写. <script> export default { setup(props,ctx){ const a = re

  • 关于IDEA2020.1新建项目maven PKIX 报错问题解决方法

    报错问题如图: 仔细看报错问题后发现,这个错误的主要原因是: ValidatorException:PKIX path building failed : sun.security.provider.certpath.SunCertPathBuilderException : unable to find valid certification path to requested target 造成这个错误的原因是因为有些依赖和插件下载的时候需要验证证书,网上找了好多资料最终解决的,我这里集合了

  • vue项目刷新当前页面的三种方式(重载当前页面数据)

    目录 vue项目刷新当前页面的三种方式(重载当前页面数据) 一.this.$router.go(0) 二.location.reload() 三.用provide / inject 组合 PS:vue项目刷新当前页面的三种方法 vue项目刷新当前页面的三种方式(重载当前页面数据) 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 二.location.reload() 这种也是一样,画面一闪,体验不是很好,相

  • 解决vue 引入子组件报错的问题

    错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de

  • 解决idea导入ssm项目启动tomcat报错404的问题

    用idea写ssm项目,基于之前一直在用spring boot 对于idea如何运行ssm花费了一番功夫 启动Tom act一直在报404 我搜了网上各种解决办法都不行,花费一天多的时间解决不了 就是在pom中添加下面代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin<

随机推荐