vue3 动态style[‘background‘] 图片url 打包后图片不显示没有打包到目录的为你

做了一个项目需求是 动态赋予多个div的背景图片，背景svg是后台数据中给的。刚开始显示不出来后来解决了（好用代码也如下可参考），后来又发现一个问题是 开发环境下可以正常显示，但部署后 svg图片不显示，排查发现是打包后根本没有把这个url对应的图片放到部署目录的assets中。找了很长时间。我当下遇到这个问题 需要两个步骤解决。

1、解决 部署环境下为啥打包的问题 

定义获取路径方法的方式返回资源路径，估计像这样定义成函数再调用。打包时才能被发现资源并打包（）
const getImgUrl = (name) =>{
 // return new URL('/assets/svgs/'+name, import.meta.url).href
  return new URL(`/src/assets/svgs/${name}`, import.meta.url).href
}

const getDivStyle = (r2) => {
const style = {}
调用方法获取资源
style['background'] =  "url('"+getImgUrl(r2.ImageUrl.slice(8))+"#svgView(preserveAspectRatio(none)')"
）

2、这样打包后发现小部分svg版文件能显示，还有一部分显示不了。然后又在网上找发现原因是太小的图片 被打包编译成了base64，因为放尺寸大一点的图片就显示正常。做法是把打包的base64尺寸阈值调成0，这样所有svg图片都可原样正常打包放入到assets中就解决了设置方法如下

在vite.config中把 assetsInlineLimit 设置为 0 可以完全禁用此项
 build: {
    assetsInlineLimit: 0,
    // ...
  },

后记小小的眯一会就解决了，看来小憩一会的睡眠 对脑袋和解决为你很有帮助啊