bug
前言
后台管理系统使用的UI组件是element-ui，使用的版本是2.8.2。
"element-ui": "^2.8.2",
<link
rel="stylesheet"
href="https://hzimg.huizhuang.com/lib/element/2.8.2/index.css"
/>
问题
线上使用人员反馈，最近在使用某个页面的时候Cascader 级联选择器样式丢失，即线上样式和本地不一样。pull最新代码，本地允许，查看元素发现线上加载的class和本地不一样导致样式丢失。同时注意到线上日志有个warning提示change-on-select is remove，当时判断肯定是线上加载的版本和本地不一样，查看文档发现change-on-select确实在2.9.0+版本被移除了。
排查
1、查看是否是服务器上的package.json和本地不一致。查看后发现是一致的。
2、查看是否是服务器上的node_modules中的版本不一致。查看后服务器中加载的版本为2.9.1，此时可以发现就是版本不一致导致。
解决问题
搜索资料后得到以下结论：
目前的npm装包会默认使用插入符号^
'~'（波浪符号）:他会更新到当前minor version（也就是中间的那位数字）中最新的版本。放到我们的例子中就是："elment-ui": "~2.8.2"，这个库会去匹配更新到2.8.x的最新版本，如果出了一个新的版本为2.9.0，则不会自动升级。
'^'（插入符号）: 这个符号就显得非常的灵活了，他将会把当前库的版本更新到当前major version（也就是第一位数字）中最新的版本。放到我们的例子中就是："elment-ui": "^2.8.2", 这个库会去匹配2.x.x中最新的版本，但是他不会自动更新到3.0.0。
由于我们配置中为"element-ui": "^2.8.2",所以服务器上自动加载了2.9.1的版本，但是2.8.2与2.9.x 兼容性不好，css不匹配。所以只需要将版本固定到2.8.2即可，所以只需要将配置中的版本改为如下重新安装即可解决问题。
"element-ui": "2.8.2",
思考
其实这应该是一个显而易见的问题，只不过因为此前没遇到这样的问题，对此没有经验遇到这种问题就会走很多弯路，才能解决这个问题，这也就是我觉得软件开发经验的重要性！希望大家都有记录和反思自己bug的习惯，可以跌倒一次，但是不能再一个地方跌倒两次。
网友评论