问题
在使用微前端过程中,子应用图片出现404问题,在设置了路径情况下依然404,发现背景图的资源地址不走公共路径,那就只能另辟捷径了,似乎转成base64是个好的方式。
通常情况下umi中的静态资源图片,小于10K的会自动编译为base64直接使用。但是超过10k的就得另外处理了
解决方式:
使用chainWebpack配置对带有标识的静态资源使用loader
npm下载file-loader url-loader
file-loader提供将静态资源作为模块引入的能力,url-loader比file-loader更强大,但是依赖于file-loader
npm i --save-dev file-loader url-loader
umirc文件配置webpack
chainWebpack(config) {
config.module
.rule('images')
// 匹配文件后缀
.test(/\.(png|jpe?g|gif|svg)$/)
.use('url-loader')
.loader('url-loader')
.options({
// 小于多少字节的文件编译为base64
limit: 81920,
// 导出地址,导出名
name: "static/[name].[hash:8].[ext]"
})
.end()
},