vue-cli3|vue-cli3 项目 token.type.endsWith is not a function 生产事故分析
事故描述
一图解千愁事故造成的影响
文章图片
生产环境某些页面打不开，控制台报错，错误信息 token.type.endsWith is not a function事故原因分析
文章图片
- 为什么生产环境引入这个包：@vue/cli-plugin-eslint？
- token.type.endsWith is not a function报错的原因是？
- 因为我们项目的 lintOnSave 的配置默认就是true, 官网也说了， 如果是true的话， 会导致生产也会被启用
文章图片
token.type.endsWith is not a function报错的原因是
- 谷歌把我指引到了 eslint-plugin-vue 的官方issues，官方的大佬说，这个问题是babel-eslint的问题！！！
文章图片
文章图片
降级babel-eslint,官方babel-eslint 8.2.2 版本之后就修复了， 但是我项目的babel-eslint的版本是10.0.1啊，为啥还会有问题，想不通，网上也碰到很多人说10.0.1的有一堆问题,反正降级到8.2.2就好了
- babel-eslint 升级到8.2.2
npm install -D babel-eslint@8.2.2
文章图片
升级 eslint-plugin-vue 到 8.3.0
npm install -D eslint-plugin-vue@8.2.2
文章图片
如何重现这个bug？
项目背景
- 基于若依前后端分离模板里面拷贝出来的项目
概率性，我发现使用npm install 比较容易出现这个问题，我的重现步骤是
- 1 vue.config.js lintOnSave 变成true
- 2 当前项目的一些依赖，主要就是babel-eslint 10.0.1 在window不同电脑里面，有的电脑，同样的版本就是报错！！
文章图片
- 3 启动服务，报错信息如下
文章图片
- 4 打包项目，控制台会报token.type.endsWith is not a function，但是打包成功，出现这种情况，如果你不注意，就把包打上去，恭喜你，领取生产bug福利
文章图片
- 5 有错误的包，直接丢生产：页面打不开，控制台报错，一脸懵逼的福利
文章图片
- vue.config.js 生产环境把lintOnSave 关掉，就算babel-eslint 报错， 也不会导致页面开不出来
文章图片
- 降低babel-eslint版本，杜绝出现这种问题，
- 为啥同样的包，不同window电脑，就会报错？
- 本文如有错误，欢迎指正，非常感谢
- 觉得有用的老铁，点个双击，小红心走一波
- 欢迎灌水，来呀，互相伤害哈 o(∩_∩)o 哈哈
- TypeError: token.type.endsWith is not a function vue eslint 问题解决
- vue项目所有vue引用报token.type.endsWith is not a function错误
- eslint-plugin-vue/issues
推荐阅读
- 微服务|尚硅谷_谷粒学苑-微服务+全栈在线教育实战项目之旅
- 工程师计划1->|工程师计划1-> 项目管理1 | 项目与项目管理
- ASF|ASF 孵化器导师姜宁（开源不是简单的代码开放，是依托项目构建一个共同体）
- vue|一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI
- 前端|一个简单炫酷的前端小项目（html+css+js）----3D图片演示
- 字符串压缩（一）之ZSTD
- Android小项目——仿iPhone计算器
- Vue|Vue 项目运行完成后自动打开浏览器的方法汇总
- es+flask搜索小项目实现分页+高亮的示例代码
- 历史上的今天|【历史上的今天】3 月 3 日（AT&T 成立；全球最大分布式计算项目正式停止；家酿俱乐部首次会议）