上周,在项目部署的时候出现一个页面css样式不正确,但是在本地开发过程中显示是正常的,但是在使用Jenkins自动编译打包部署时,页面布局显示错乱。
分析过程:
1、一开始以为地Jenkins打包编译的脚本代码有问题,经过排查是正常的。
2、本地开发正常,打包版本不正常,分析可能是编译后css的优先级被改变,导致样式被覆盖。但是本地直接build,然后使用ngnix部署,发现样式是正常的。因此排除是样式优先级被覆盖问题
3、把在本地手动打包的文件,替换Jenkins打包生成的dist文件,启动发现也是正常的。
4、最后发现,Jenkins打包的代码显示找不到一个css文件。但是本地打包是不会显示这个问题。
分析结果:
由于css文件中,在import时,我把@import "css/vehicleArchives";误写成了@import "css/vehiCleArchives",导致找不到css文件。但是在本地开发过程和build完部署启动,都没有报找不到样式文件这个错误,因为我们猜测应该是windows环境和linux环境的区别。
因为Jenkins自动打包部署程序是部署在linux系统下,而本地开发是在windows环境下。由于样式路径写错了,但是在windows下忽略了路径大小写的问题,而Linux是会区分大小写,因此提示无法找到文件。
简单总结性项目再windows和linux下部署的差异:
1、大小写敏感度不同:
Linux下路径和文件名都是区分大小写的。abc/bcd/aa.jpg和abc/Bcd/aa.jpg是两个不同的文件路径,window访问没问题,Linux大小写敏感会导致找不到文件。
2、盘符及目录分隔符的区别
父子目录及目录与文件的分隔符,Windows是,而Linux是/,java编码最好使用File.separator(能够自动识别Widow或者Linux,使用想用的分隔符)
两个不同路径分隔符,window下;,Linux下为:,java编码最好使用File.pathSeparator
在前端开发过程中,暂未遇到盘符和分隔符的相关异常,后续有遇到再进行记录。