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

当我们升级 Vue 项目依赖时，有时候会遇到一些报错。这些报错可能是因为新的依赖版本与原来的版本不兼容，也可能是因为我们的代码存在一些问题。下面是一个完整的攻略，包括以下几个步骤：

步骤一：找到报错信息

在升级依赖时，如果出现报错，首先要做的就是找到报错信息。报错信息通常包括错误的代码行、错误类型、错误信息等内容。通过这些信息，我们可以大致了解报错的原因。

比如，我们升级了 vue-router 的版本，然后出现了如下报错：

Error: [vue-router] Route with name 'home' does not exist

这个报错告诉我们，我们使用了名称为 home 的路由，但是这条路由不存在。这可能是因为我们在新增的 vue-router 版本中没有定义这个路由，或者我们在代码中写错了路由名称。

步骤二：查看新版本依赖文档

一般来说，我们在升级依赖时都会有一个具体的升级计划。这个计划可能包括升级的依赖、升级的版本等内容。在进行升级时，我们需要查看新版本依赖的文档，以确保我们使用的方法和配置都是正确的。

比如，我们升级了 vue-router 依赖为最新版本的 4.0.0，但是升级后出现了上面提到的报错。这时候，我们就需要查看 vue-router 文档，看看新版本中是否有新的路由定义方式或者路由名称的变化。

文档查找方式：在 npm 上找到依赖库即可

步骤三：检查代码并更改

如果在查看新版本依赖文档后，我们仍然没有找到解决方案，那么我们就需要仔细检查我们的代码。有可能是我们的代码写法有问题，导致新版本的依赖无法与其正常工作。

比如，如果我们在路由定义文件中写错了路由名称，就会出现上面提到的 Route with name 'home' does not exist 错误。这时候，我们需要打开我们的路由定义文件，仔细检查路由名称是否正确。

示例1：使用vue-cli升级到vue3的时候，由于vue3废弃了$on,给推荐给我们用mitt，但是这个依赖的使用方式和$on有差异，如果在代码中没有做修改可能会报错

// 引入并初始化mitt库
import mitt from 'mitt'
const bus = mitt()

// 监听事件
bus.on('eventName', (data) => {
  console.log(data)
})

// 触发事件
bus.emit('eventName', 'hello world')

示例2：如果我们在使用vue3时想要使用localStorage, 那么我们需要使用@vue/composition-api提供的useLocalStorage而不是原来直接使用localStorage

// 引入useLocalStorage
import { useLocalStorage } from '@vue/composition-api'

// 使用useLocalStorage
export default {
  setup() {
    const { value: username, set: setUser, remove: removeUser } = useLocalStorage('username', '')
    return {
      username,
      setUser,
      removeUser,
    }
  }
}

通过以上三个步骤，我们就可以处理掉大部分的升级报错了。当然，如果你遇到了更棘手的问题，也可以通过搜索引擎、官方文档等方式寻求更多的帮助。