Vue动态图片导入与生产环境部署解决方案
本帖最后由 zzz 于 2025-9-9 17:06 编辑问题原因：Vite在开发和生产环境下处理静态资源的方式不同。开发环境使用原生ES模块导入。而生产环境会对资源进行哈希处理并复制到assets目录。
解决方案：
1.使用正确的导入方法。
2.确保构建配置正确。
3.使用public目录存放完全静态的资源。// 解决方案1：在Vite项目中正确导入图片
const images = import.meta.glob('@/assets/images/*.{png,jpg,jpeg,svg,gif}', {
eager: true,
import: 'default'
});
// 转换为可用格式
const imageMap = {};
for (const path in images) {
const imageName = path.split('/').pop();
imageMap = images;
}
// 在组件中使用
const imageUrl = imageMap['example.jpg'];
//解决方案2：对于动态路径，使用new URL
const getImageUrl = (name) => {
return new URL(`./assets/images/${name}`, import.meta.url).href;
};
// 在组件中使用
const imageUrl = getImageUrl('example.jpg');
// vite.config.js
export default defineConfig({
plugins: ,
assetsInclude: ['**/*.gltf', '**/*.glb'] // 添加需要处理的文件类型
});
页:
[1]