1.情况：使用vite打包后，上线时部分图片展示不了。
1.1使用css引用的图片能够正常展示，能够打包进dist文件中assets中，查看浏览器中引用路径为assets中的图片，如此引用的图片不需经过特别处理，不管是放在static或者public的文件夹中都可以，都能够自动打包进dist中的assets文件夹中，并且浏览器中能够自动编译为获取dist中的assets文件的图片，不需特地修改代码中图片的路径（因为编译到assets文件的图片命名会带hash值，因此需要vite特地取编译才能正确获取到图片）
1.2写在vue文件的图片，使用行内样式的无法显示，查看dist文件，发现行内样式图片没有打包进assets文件中，浏览器中的图片引用路径没被编译，图片无法展示。此处的行内样式图片vite不会进行打包，更不会帮助路径编译，因此图片是无法展示的。
2.解决行内样式图片无法显示图片：
2.1将所有图片文件放进public文件夹中，因为vite不会打包public的文件，并且不会给图片加上hash值
2.2在代码层面修改图片引用路径，由/public/img/xxx.png修改为/img/xxx.png，路径计算公式为通过dist文件夹中获取该图片的路径计算，因为public文件夹打包至dist中时文件结构发生改变（这样并不会导致本地环境无法引用到该图片，去除/public依然可以获取到图片，虽然vscode插件显示获取不到该图片）
2.3至此可以解决图片无法显示问题
标签：上线,dist,assets,vite,public,打包,图片 From： https://www.cnblogs.com/LylePark/p/17715198.html