Vue3 Vuetify SPA执行npm run build时Rollup解析image导入失败求助

算力阿峰

2026-7-23

问题原因

import.meta.glob 选项参数错误：你使用了{ as: "imagePath" }参数，但Vite的import.meta.glob仅支持"module"（默认）、"raw"、"url"三种as选项值，自定义的"imagePath"会导致Rollup在生产构建时无法正确解析资源类型，进而抛出导入失败的错误。开发环境（dev）因Vite的宽松解析策略未触发报错，但生产构建时Rollup的严格校验会暴露这个问题。
相对路径解析层级错误：使用../../assets/gallery/*.*时开发环境无法加载图片，大概率是组件所在目录与assets目录的相对层级计算错误，或者Vite在开发模式下对glob相对路径的解析逻辑与生产不同，导致路径指向无效位置。

解决步骤

修正import.meta.glob配置：将as选项改为"url"（你需要获取图片的资源URL，而非自定义类型），如果需要直接拿到所有资源URL而非异步加载函数，可添加eager: true参数。修改后的代码：
```
const imagePaths = import.meta.glob("@/assets/gallery/*.*", { as: "url", eager: true });
```

确认@别名配置有效性：检查Vite配置文件（vite.config.js/vite.config.ts）中是否已正确配置@指向项目根目录的src文件夹，示例配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

修正相对路径（可选）：如果仍想使用相对路径，先确认组件到src/assets/gallery的正确相对层级。比如组件在src/views/gallery/Gallery.vue，则正确的相对路径应为../assets/gallery/*.*，同时同样要将as选项改为"url"。