关于vue.js:vuecli3-项目-tokentypeendsWith-is-not-a-function-生产事故分析

事变形容

一图解千愁

事变造成的影响

生产环境某些页面打不开，控制台报错，错误信息 token.type.endsWith is not a function

事变起因剖析

• 为什么生产环境引入这个包：@vue/cli-plugin-eslint？
• token.type.endsWith is not a function 报错的起因是？

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

• 因为咱们我的项目的 lintOnSave 的配置默认就是 true, 官网也说了，如果是 true 的话，会导致生产也会被启用
  

以后我的我的项目的配置又刚好是把 lintOnSave 给开进去了！！！！

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

• 谷歌把我指引到了 eslint-plugin-vue 的官网 issues，官网的大佬说，这个问题是 babel-eslint 的问题！！！
  
  

token.type.endsWith is not a function 解决方案

babel-eslint 变成 8.2.2 版本

降级 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