关于vite打包img分包后图片加载问题

Question

老师你好，我的项目在打包处配置了js css img分包的功能，但是打完包后发现img会去css里面加载（vue文件css里的背景图是通过./ ./img路径招的），请教下这个问题怎么解决，在网上了解有不少人遇到这个问题，如果取消分包配置加载正常

这个是打包配置，build里注释部分为不分包配置，打开的是上述分包配置这个是加载错误的路径，跑去css文件夹找img了这个是打完后的包

Answer 1

张轩 2022-07-14 09:48:03

同学你好

经过一阵 issue 的查询，这是个 vite 自身的 bug，发现了这个问题https://github.com/vitejs/vite/issues/4503 和你的应该是一样的，可以自己浏览一下，

解决方案当中描述如下：

这是2.9 版本 vite 的一个 bug，升级到最新版 Vite 3.0.0-alpha.0 可以修正这个问题。

I was able to reproduce with Vite 2.9.9.
But after upgrading to Vite 3.0.0-alpha.0, it worked. Maybe #7644 (comment) fixed this.
Closing as it is fixed.

Answer 2

张轩 2022-07-13 09:33:51

同学你好

你在项目中是怎样引用图片的呢？贴一段简单的代码让我看一下～

• 提问者 draw #1

  回复没法贴图，我打字给你看哦，俩种方式都试过，包括：background:url（../../assets/img/1.png）和background:url（@/assets/img/1.png）俩种方式都是一样的效果，一样的不分包可以，分包后跑去css拉图片了

• 提问者 draw #2

  老师记得查看回复啊(o^^o)