Background description

The front-end static resource file is placed in the Resources folder of the back-end spring boot project. After multi-environment packaging, the icon and text on the front-end page are not displayed as expected. Check the browser console and find the following errors.

OTS parsing error: incorrect file size in WOFF header

Cause location

Let’s first look at the configured Maven POM content.

<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>
                <filtering>true</filtering>
            </resource>
        </resources>
</build>

You can see that the filtering tag is true, which indicates that the filtering mode is enabled. So what is the function of filtering true?

Filtering: turn on filtering and replace the parameter (eg. ${name}) in the file under the directory with the specified parameter. Directory: specify the location of the resource file.

However, it should be noted that because the project needs to configure multiple environments, it needs to use @profile. Active @ , so the @ method is configured for replacement instead of using the default $symbol.

# application.ymlIn the file
spring:
  # Configure which environment to use, dev development, beta testing, prod online, mainly different data sources.
  profiles:
    # Get the environment specified by maven
    active: @profile.active@

Therefore, the main meaning of the above POM is to replace all @ XXX @ under Src/main/resources. Please refer to the relevant contents of Maven profile for the specific replacement principle, which will not be introduced here.

Solution:

Because there are many @ symbols in the woff file, the above configuration causes the original content of the woff file to be replaced, which leads to errors in browser parsing
therefore, the core of the solution is to prevent woff files from being scanned under filtering.

Scheme 1: when the filtering mode is started, the contents in the static directory will not be replaced.

    <build>
        <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>
                <!-- Turn on filtering and replace the parameters in the file under directory with the specified parameters -->
                <filtering>true</filtering>
                <! -- Use filter to exclude files under fonts/ first, otherwise the page icon will not be loaded -->
                <excludes>
                    <exclude>static/fonts/**</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <!-- Re-copy the excluded files under fonts/ without using the filter -->
                <filtering>false</filtering>
                <includes>
                    <include>static/fonts/**</include>
                </includes>
            </resource>
        </resources>
    </build>

Scheme 2: the nonfilteredfileextensions tag specifies which suffix files are not uniformly encoded.

    <build>
        <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>
                    <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>
                <filtering>true</filtering>
            </resource>
        </resources>
    </build>