前后端分离 项目部署 有两种方式
第一种是将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)
}
打包后的文件 在对字体进行引用时 自动添加../..
的资源定位