面则获取图片路径是子域名加载正确但是当主服务加载子服务的过程导致相对路径的域名变成了主服务主服务是不存在该hash图片了导致了图片的加载404问题

解决方案

使相对路径的图片变成base64的展示格式上传到CDN位置使用访问静态资源的方式也即http的方式访问图片取消Hash的命名方式并使得主应用中也包含该图片例如…/…/assets/img/empty.png

为什么有些是base64的格式,有些不是经过查询之后发现10kb以下的图片会自动转化为base64的格式但是以上的不会

在实践过程中发现并不是10kb以下的都会变成base64的格式实测中4.96k的png格式图片转化失败3.37kb的成功了

所以最简单的方式是对图片进行压缩但是压缩图片这种方式非常有限制性因为如果图片非常大压缩到10kb以下可能很不现实并且可能导致的图片的失帧

将所有的图片都上传至静态资源管理服务器通过访问该服务器访问静态资源目前没有专门存放静态资源的服务器所以该方式可以之后尝试

并且如果静态资源服务器关闭或撤销可能导致图片的丢失该方式也不太推荐因为该方式导致了资源的分离

该方式的优点是不用对自服务做更多处理但是缺点也很明显每次自服务中存在大于10kb的图片也需要添加到主服务中并且要非常注意不能有同名的图片之类的总之该方式简单粗暴不推荐,取消hash的方式请看images配置部分

const

http://localhost:${port};module.exports

{chainWebpack:

{config.module.rule(images).test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use(url-loader).loader(url-loader).options({limit:

4096,

img/[name].[hash:8].[ext],//图片命名包含hash//

name:

img/[name].[ext],//图片命名包去掉hashpublicPath,},},});},

设置publicPath为上线环境的值所以缺点也是打包build的时候需要确定微服务的域名该方式并不能根据环境动态设置该值该方式也算是方式2的一个具体实现如果线上环境比较单一可以使用该方式但是如果打包后有多个环境与域名例如sit/uat/prod则该方式不合适

publicPath的值只能简单的区分是开发环境还是线上环境而无法对线上的环境进行区分

const

DNS_MAP{sit:xxx.xx.sit,uat:xxx.xx.uat,prod:xxx.xx.prod

const

window[env];//系统配置该值是你可以获取到的环境值

const

:style{background-image:url(${domain}/img/empty.png)}/divnginx转发方式

nginx根据前缀设置转发其实该方式并不合适因为基本打包方式导致所有微服务可能都是/assets/img的前缀图片域名变成主服务域名主服务并不清楚当前图片是转发给那个子服务的