vue build之后 无法访问element ui图标

前后端分离 项目部署 有两种方式
第一种是将build之后的dist文件夹放在springboot应用的static文件夹下 使用tomcat启动
第二种是使用nginx启动
而放在springboot应用中 使用tomcat启动 会出现无法访问element图标、字体的错误

方法一

使用maven资源过滤配置 这种方式适合于资源被过滤的情况

   <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <configuration>
                    <nonFilteredFileExtensions>
                        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                        <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                    </nonFilteredFileExtensions>
                </configuration>
            </plugin>
        </plugins>
    </build>

方法二

这种方法适合于资源访问链接错误导致的资源加载异常

*{pointer-events:none}
@font-face{font-family:element-icons;
src:url(/static/fonts/element-icons.535877f.woff)
format("woff"),url(/static/fonts/element-icons.732389d.ttf) 
format("truetype");font-weight:400;

在CSS文件夹下的app.xxx.css文件中 找到static/fonts/element-icons.535877f.woff 在它的前面添加/dist/资源定位 这样就可以正常访问到图标文件了 顺便将static/fonts/element-icons.732389d.ttf也添加/dist/资源定位就可以了

方法三

直接在vue打包之前 配置好打包路径 也可以解决资源找不到的问题

  if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        
添加这一句代码
        publicPath:'../../'

      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

打包后的文件 在对字体进行引用时 自动添加../..的资源定位