现象描述

今天在更新web应用之后发现有个页面加载不出来了,打开调试页面发现是一个css文件无法加载,如图:

springboot无法自动识别静态资源配置文件 springboot无法加载静态资源_前端


可是其它静态文件的加载都是OK的,难道是打包没有打包进去?!于是尝试把web应用的jar包解压,发现该文件其实是存在的,只不过该文件的大小为0。手动把前端代码重新打包,确实看到生成了大小为0的3个css文件,见图:

springboot无法自动识别静态资源配置文件 springboot无法加载静态资源_css_02


这又是为何呢?之前这个应用部署后该功能是可用的,于是把之前可用的jar包解压后发现里面也存在着大小为0的css文件,而且不打包编译部署,在本地直接运行也是OK的,这就更是奇怪了~~

问题追踪

1. 为什么会编译生成大小为0的css文件?

这个稍微想一下其实就找到原因了:我们前端用的vue框架来实现的,在使用IDE自动生成vue文件模板的时候会默认包含html部分、script部分以及style部分,有时候该vue文件并不需要定义特殊的样式,所以style这部分就为空了,偷懒也没有删掉,如图:

springboot无法自动识别静态资源配置文件 springboot无法加载静态资源_前端_03


这种情况用npm build打包编译之后就会生成一些空的css文件。

2. 为什么大小为0的css文件加载会报错?

这个就有点儿百思不得其解了,于是一番stackoverflow,发现也有人有类似的问题,见:https://stackoverflow.com/questions/63562654/spring-boot-not-serving-empty-zero-byte-static-assets 既然是springboot自身机制的原因,那为啥我之前可以嘞? 哦,我之前的版本使用的maven进行的编译,其中springboot的版本是2.2.5,而现在使用gradle以后,使用的版本换成了2.4.1。
这个问题其实在springframework的github上也有人提issue,但看了半天也没看出个所以然了,貌似大家就认为应该是这样的。
如果是版本的问题,那为什么本地直接运行是OK的呢??

解决办法

  1. 似乎把springboot的版本回退回去能解决问题,但这个有点儿得不偿失,放着新版本不用再回退到旧的版本。。
  2. 老老实实在前端代码里把为空的样式部分删掉,然后重新编译,事实上我也是这么干的,确实可行,只是找这些为空的文件费了一点儿时间。。
  3. 是不是webpack在打包前端代码的时候自动检测,不生成空的css文件呢? 找了一圈也没找到合适的办法,如果有朋友知道这种方法怎么搞,欢迎留言讨论~~