开发环境与生产环境页面表现不一致

遇到一个奇怪的问题,开发环境下好好地,生产环境报错,部分内容不显示了?甚至,开发环境下,按钮不见了,生产环境却没任何问题?

最近,公司把代码管理改在云效,从新地址克隆下项目执行npm install报错 npm ERR! cb() never called!。万能的百度告诉我,只需执行两步即可解决:

  • 清除npm缓存

    npm cache clean -f

  • 删除项目种的package-lock.json文件和node_modules之后,再执行npm install

我抓住救命稻草一般跟着执行,并没用!!!而且我本地也没有package-lock.json文件,因为这个文件没有提交到代码仓库。

最后发现是公司网太差,等网好些了执行npm install就没问题。这个问题就此解决。

刚刚说到,package-lock.json没有提交到代码仓库进行管理,这也为后面开发环境生产环境页面表现不一致埋下了伏笔……

事情是这样的:

在一个页面中公用table组件(ant design vue的table),通过切换不同的类型,相应变更列,进而展示不同的表单。多个页面都有“操作”列,类型不同,操作列中的操作按钮不同。于是,我在页面中这么写:

在一个叫action的slot中,通过if判断,显示不同的按钮。
本来这个页面好好的,突然有一天发现,开发环境下,只有activeTabKey的值为member时,操作列会有按钮,为其他值时,操作列空空如也~ 生产环境下,不同类型下按钮正常展示。
经过测试发现,当slot里面没用使用v-if,即操作列固定展示某些内容时,页面展示没问题;当使用v-if时,只有第一个v-if匹配时内容会展示,之后的内容通通没用,跟没写一样;第一个v-if不变,后面改为v-else-if,如下图:

按钮能正常展示了。

对比修改代码管理地址前后的package-lock.json文件,发现部分依赖包的版本有变化,猜测应该是依赖包的版本变化导致。

思考:

如果是依赖包版本变化导致,那我需要依赖包的版本固定,保证其他人在npm install时大家的依赖能一致。那就需要把package-lock.json提交到仓库进行管理。但是,回到我一开始说的问题,执行npm install时报错 npm ERR! cb() never called!,网友说要删除package-lock.json文件,这不就自相矛盾了吗?
我想,执行npm install时报错 npm ERR! cb() never called!有多种原因:
1)可能跟我一样,是网络问题
2)如网友所说,要先清除npm缓存,删除package-lock.json文件

为什么要删除package-lock.json文件呢?

有一种情况是,包的源换了。比如一开始使用的是yarn install生成的pakage-lock.json,此时保留package-lock.json,删除node_modules,再执行npm install就会报错。