背景說明

前端靜態資源文件放在后端SpringBoot項目resources文件夾下，多環境打包后前端頁面出現了圖標及文字未按預期樣式顯示的情況，查看瀏覽器控制臺發現出現如下錯誤。

OTS parsing error: incorrect file size in WOFF header

原因定位

先來看看配置的Maven pom內容。

<build><finalName>project-name</finalName><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId><!-- 配置 @ 占位符 --><configuration><encoding>utf-8</encoding><delimiters><delimiter>@</delimiter></delimiters><useDefaultDelimiters>false</useDefaultDelimiters></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins><resources><resource><directory>src/main/resources</directory><!-- 開啟過濾，用指定的參數替換directory下的文件中的參數 --><filtering>true</filtering></resource></resources> </build>

可以看到 filtering標簽為true，這代表啟用了filtering模式。 那么filtering為true作用是什么？

• filtering：開啟過濾，用指定的參數替換directory下的文件中的參數(eg. ${name})
• directory：指定資源文件的位置。

但是要注意，因為項目需要配置多環境需要使用 @profile.active@ ，因此配置了@ 方式進行替換，而非使用默認的 $ 符號。

# application.yml文件中 spring:# 配置采用那套環境，dev開發、beta測試、prod線上，主要是數據源不同。profiles:# 獲取maven指定的環境active: @profile.active@

因此上面這段pom中內容主要含義：將src/main/resources下的所有@xxx@進行替換,具體替換原理請看Maven Profile相關內容，這里不做介紹。

問題解決

由于WOFF文件中存在較多@符號，因此上述配置導致WOFF文件原本內容被替換了，這導致瀏覽器解析時出錯。
因此解決的核心在于避免WOFF文件在filtering下不被掃到。

• 方案一：filtering模式啟動時不對static目錄下的內容進行替換。

<build><!--設定打包后包名，如果未指定則使用artifactId與version拼接--><finalName>package-name</finalName><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId><!-- 配置 @ 占位符 --><configuration><encoding>utf-8</encoding><delimiters><delimiter>@</delimiter></delimiters><useDefaultDelimiters>false</useDefaultDelimiters></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins><resources><resource><directory>src/main/resources</directory><!-- 開啟過濾，用指定的參數替換directory下的文件中的參數 --><filtering>true</filtering><!-- 使用filter先排除fonts/下文件,否則頁面圖標加載不出來 --><excludes><exclude>static/fonts/**</exclude></excludes></resource><resource><directory>src/main/resources</directory><!-- 不使用filter再將被排除的fonts/下文件，重新拷貝 --><filtering>false</filtering><includes><include>static/fonts/**</include></includes></resource></resources></build>

• 方案二：nonFilteredFileExtensions標簽 指定哪些后綴的文件不進行統一編碼。

<build><!--設定打包后包名，如果未指定則使用artifactId與version拼接--><finalName>package-name</finalName><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId><!-- 配置 @ 占位符 --><configuration><encoding>utf-8</encoding><delimiters><delimiter>@</delimiter></delimiters><useDefaultDelimiters>false</useDefaultDelimiters><!-- 過濾后綴為.woff或者.woff2或.tff的所有文件，不對其進行統一編碼 --><nonFilteredFileExtensions>woff</nonFilteredFileExtensions><nonFilteredFileExtensions>woff2</nonFilteredFileExtensions><nonFilteredFileExtensions>tff</nonFilteredFileExtensions></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins><resources><resource><directory>src/main/resources</directory><!-- 開啟過濾，用指定的參數替換directory下的文件中的參數 --><filtering>true</filtering></resource></resources></build>

如果有幫到你的話，給個免費的贊吧^ _ ^

總結

以上是生活随笔為你收集整理的Maven — maven filtering OTS parsing error incorrect file size in WOFF head 产生原因及两种解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。