如何避免因依赖过时的vue-cli3而导致令项目出问题的token.type.endsWith错误：一则防患于未然的故事

2023-12-13 13:07:01

正文

随着web开发技术的不断更新迭代，我们身边所依赖的各种技术组件也在不断发展，一些老旧的版本因为不再被维护或因为自身存在着某些缺陷，而经常会给开发者在编码时带来各种各样的麻烦。最常见的一个问题就是项目引入过时依赖而报出的各种各样的bug，下面我们通过一个真实的事故例子，带领大家一起分析一个vue-cli3项目报出token.type.endsWith错误的原因，从中汲取经验，避免在实际项目中踩到相同的坑。

事故

在某次开发过程中，当某一JavaScript文件在项目的生产环境中执行时，抛出了token.type.endsWith is not a function这个错误。经过排查发现，导致这个问题的根源在于某个依赖包的版本过旧，最终导致vuex的store无法正常运行。

事故造成的影响

这个错误的发生直接导致了项目无法正常运行，最终影响到用户的使用体验。

事故原因分析

经过分析，我们发现导致这次事故的原因有两个：

项目依赖的vue-cli3版本过旧。
生产环境中引入的@vue/cli-plugin-eslint这个包出现了版本问题。

为了解决这个问题，我们首先将vue-cli3更新到最新版本，然后将@vue/cli-plugin-eslint包从项目中删除，最终解决了问题。

为什么生产环境引入这个包：@vue/cli-plugin-eslint？

@vue/cli-plugin-eslint是一个用于检查代码风格的包，它可以帮助开发者在编写代码时避免一些常见的错误。但是，由于这个包只在开发环境中使用，所以不应该在生产环境中引入。

token.type.endsWith is not a function报错的原因是

token.type.endsWith是一个JavaScript方法，它用于判断一个字符串是否以另一个字符串结尾。在我们的项目中，token.type.endsWith方法被用来检查一个字符串是否以"."结尾。但是，由于我们使用了过时的vue-cli3版本，这个方法在生产环境中无法正常工作，因此报出了错误。