Maven — maven filtering OTS parsing error incorrect file size in WOFF head 产生原因及两种解决方案

背景说明

前端静态资源文件放在后端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>

如果有帮到你的话，给个免费的赞吧^ _ ^