Vue动态图片导入与生产环境部署解决方案

zzz

问题原因：Vite在开发和生产环境下处理静态资源的方式不同。开发环境使用原生ES模块导入。而生产环境会对资源进行哈希处理并复制到assets目录。
解决方案：
  1.使用正确的导入方法。
  2.确保构建配置正确。
  3.使用public目录存放完全静态的资源。

1. // 解决方案1：在Vite项目中正确导入图片
   
2. const images = import.meta.glob('@/assets/images/*.{png,jpg,jpeg,svg,gif}', {
   
3. eager: true,
   
4. import: 'default'
   
5. });
   
6. 
   
7. // 转换为可用格式
   
8. const imageMap = {};
   
9. for (const path in images) {
   
10. const imageName = path.split('/').pop();
    
11. imageMap[imageName] = images[path];
    
12. }
    
13. 
    
14. // 在组件中使用
    
15. const imageUrl = imageMap['example.jpg'];
    
16. 
    
17. //解决方案2：对于动态路径，使用new URL
    
18. const getImageUrl = (name) => {
    
19. return new URL(`./assets/images/${name}`, import.meta.url).href;
    
20. };
    
21. 
    
22. // 在组件中使用
    
23. const imageUrl = getImageUrl('example.jpg');

复制代码

1. // vite.config.js
   
2. export default defineConfig({
   
3.   plugins: [vue()],
   
4.   assetsInclude: ['**/*.gltf', '**/*.glb'] // 添加需要处理的文件类型
   
5. });

复制代码