vue 前端动态导入文件 import.meta.glob 导入图片

背景：

在开发过程中，前端会引入资源文件，这里主要是引入图片。在开发环境，导入的图片显示正常，但是打包部署后，导入的图片就不能正常显示。

原因分析，可能有如下几点：

1.图片不能显示，可能的后端对图片代理出错【后端问题】

2.图片不能显示，可能是前端打包配置参数出错【前端问题】

3.可以通过查看标签绑定的src路径判断是谁的问题

开发环境和生产环境，图片都正常显示，绑定图片src如下：

开发环境正常显示图片，生产环境不正常，如果绑定的src一致，则前端打包出错，具体出错在：vite打包静态资源文件，通过封装的getAssetsFile()方法，这里的build.target 不支持import.meta.url 时导致运行出错。

一、开发环境和生产环境不同，所以图片的src不一致

背景： 

在做项目的时候，在 vue3+vite 项目中，动态引入图片，在开发环境中的时候,图片可以正常显示,但是打包构建后,部署生产不能正常显示图片，通过排查，发现生产环境的图片绑定的src和开发环境的一样【问题出在这儿】，build配置打包的参数如下：

vite.config.js配置是“打包配置build”，配置参数如下：

代码如下：

build: { minify: \'terser\', outDir: \'dist\', // 打包输出文件名 sourcemap: false, assetsDir: \'static\', // 指定生成静态资源的存放路径 rollupOptions: { output: {  manualChunks(id) { if (id.includes(\"node_modules\")) { const arr = id.toString().split(\"node_modules/\")[1].split(\"/\"); switch (arr[0]) { case \"@vue\":  break; case \"element-plus\":  return \"_\" + arr[0]; } }  },  // 静态资源打包做处理  chunkFileNames: \'static/js/[name]-[hash].js\',  entryFileNames: \'static/js/[name]-[hash].js\',  assetFileNames: \'static/[ext]/[name]-[hash].[ext]\' } }, terserOptions: { // 清除console和debugger compress: {  drop_console: false,  drop_debugger: false }, output: {  // 去掉注释内容  comments: false } } }

备注：打包后的静态资源的路径必改变，并且对静态资源使用了哈希hash，打包+资源哈希 =>导致了 路径必改变。因为在生产构建时，vite会进行必要的转换，包括对静态资源的URL打包和资源哈希。经过打包和资源哈希后，这个URL不会和原样一样；如果保持一样，那就是在build.target不支持import.meta.url【问题所在】

官网链接：vite官网

写到这儿。。。你就能知道为什么开发环境图片能正常显示，但生产环境的图片不能正常显示。

以下是解决方式。。。

二、前端开发，动态导入资源的几种方式 

vue2 版本的时候,使用的是require来引入图片，打包构建工具是webpack；vue3版本的时候，使用的构建工具是vite脚手架，所以需要使用import.meta.glob来引入图片，并且需要使用new URL来获取图片的路径。

总结：Vue2和vue3 在动态导入图片的核心差异主要体现在 构建工具（Webpack vs Vite）的处理方式 上，框架对静态资源的导入的底层逻辑未改变。

前端导入动态资源的精简思路：

在前端开发中，动态导入资源，导入

使用import.meta.glob。

在webpack或者vue-cli构建的vue2项目，可以使用require引入，例如：

注意：require仅支持在webpack环境中使用,vite中无法支持

// 假设图片在/assets/images下

在vite或者vue3，构建工具通常搭配vite，引入图片new URL() + import.meta.url

注意：Vite 基于原生 ES 模块，对静态资源的处理更灵活，支持两种主流动态导入方式：

1.new URL() + import.meta.url

new URL(url, import.meta.url).href可以处理大部分图片路径问题

2. import.meta.glob 

 import.meta.glob （批量导入）

用于动态导入多个图片（如遍历目录下所有图片），返回一个模块路径到 URL 的映射对象。

const modules = import.meta.glob(\'../../assets/images/*.png\')

前端导入动态资源的详细思路： 

分以下几个思路书写：

(一)、在webpack或者vue-cli或者vue2，构建工具通常搭配webpack。引入图片使用require

(二)、在vue2或vue3中，将url资源路径使用字面量替换，即用一个变量代替url路径字符串。

(三)、在vite或者vue3，构建工具通常搭配vite，引入图片new URL() + import.meta.url

(四)、动态导入，包含或不包含子目录，形如:\"/home/homeBg.png\"。以及封装的几种方法

(一)、在webpack或者vue-cli或者vue2【通常搭配webpack】引入图片使用require

在webpack、vue-cli或者vue2项目中，使用require可以，vite或者vue3不可以。

核心代码：

在vite或者vue3中，通过require动态引入， 发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法。vue3前端框架使用的是vite，vite和webpack不一样，vite不能使用require()导入资源文件，vite基于原生 ES 模块，对静态资源的处理更灵活，用import的方式导入资源文件。

实现思路：

Webpack 通过 require 函数识别静态资源路径，并在构建时将图片复制到输出目录，同时生成正确的路径。 动态导入方式 ：必须使用 require 包裹动态路径（否则会被视为普通字符串，导致 404）。

完整代码：

   export default { methods: { getImageUrl(name) { // Webpack 会解析 `require` 内的路径，动态拼接时需确保路径可被匹配 return require(`@/assets/images/${name}.png`); } } }

(二)、在vue2或vue3中，将url资源路径使用字面量替换

此方法适用于单个资源文件，如果有多个，需要多次引入且不重合。

核心代码：

import homeBg from \'src/assets/images/home/home_bg.png\'

(三)、在vite或者vue3【通常搭配vite】引入图片new URL() + import.meta.url

此方法适用于多个资源文件，动态传入文件路径。

Vite 基于原生 ES 模块，对静态资源的处理更灵活，支持两种主流动态导入方式：

1.new URL() + import.meta.url

2. import.meta.glob 

 (1).动态导入new URL() + import.meta.url

在 new URL() 方法中，import.meta.url 是一个特殊的变量，它表示当前模块的 URL。 

new URL() + import.meta.url//核心

new URL(`../assets/img/${name}`, import.meta.url);//精简

new URL(`../assets/img/${name}.{png/jpg/jpeg/gif}`, import.meta.url).href ;//详细

这里面的href值即为当前图片地址

new URL(url, import.meta.url).href可以处理大部分图片路径问题

实现思路：

在src目录下创建一个util文件夹，文件夹里创建一个utils.js文件 

在utils.js文件定义并暴露一个getAssetsFile()方法

在vue文件导入并使用，形如：

核心代码：

//utils.js// 获取assets静态资源export const getAssetsFile = (url: string) => { return new URL(`../assets/images/${url}`, import.meta.url).href;};

//vue import { getAssetsFile } from \'src/util/utils\'

//js 

完整代码：

 
  
import { getAssetsFile } from \'@/utils\'

(2).import.meta.glob

简介：

Vite官方提供的 import.meta.glob API。这个方法一般用于批量引入js或者ts文件，但实际上这个方法就是 很多import语句的集合而已，import是可以引入图片的，所以import.meta.glob 也同样可以引入图片资源，只不过需要加入配置项 as:\'url\' 就可以了。

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块（该方式为异步加载模块形式），该函数接收一个匹配模块文件的通配符，返回一个对象，其中键是文件路径，值是可以导入相应模块的函数。

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob(\'./dir/*.js\')

import.meta.glob也支持多个匹配模式化【支持数组】

const modules = import.meta.glob([\'./dir/*.js\', \'./another/*.js\'])

Glob导入注意事项：

注意事项：

1.

// 正确用法 const modules = import.meta.glob(\'./components/*.vue\')

// 错误用法 - 不支持动态路径

// import.meta.glob 的参数都必须以字面量传入。

// 你不可以在其中使用变量或表达式。

const path = \'./components\'

const modules = import.meta.glob(`${path}/*.vue`) // ❌

2. 

// 异步加载 - 代码分割，按需加载 const modules = import.meta.glob(\'./modules/*.ts\')

// 同步加载 - 所有模块打包在一起 const modules = import.meta.glob(\'./modules/*.ts\', { eager: true })

3. 

// 定义模块类型 interface ModuleType { name: string; setup: () => void; }

// 使用泛型指定类型 const modules = import.meta.glob(\'./modules/*.ts\', { eager: true })

实现思路:

 import.meta.glob （批量导入）

用于动态导入多个图片（如遍历目录下所有图片），返回一个模块路径到 URL 的映射对象。

以./src/assets/images/*为例：

const modules = import.meta.glob(\'../../assets/images/*.png\')console.log(\'modules\', modules)

控制台打印是这样的：

// vite 生成的代码const modules = { \'./dir/bar.js\': () => import(\'./dir/bar.js\'), \'./dir/foo.js\': () => import(\'./dir/foo.js\'),}

上面可以看出所有模块都是异步模块,如果有同步加载的需求,可以显式指定第二个参数:：

const modules = import.meta.glob(\'./dir/*.js\', { eager: true })

控制台打印是这样的：

// vite 生成的代码import * as __vite_glob_0_0 from \'./dir/bar.js\'import * as __vite_glob_0_1 from \'./dir/foo.js\'const modules = { \'./dir/bar.js\': __vite_glob_0_0, \'./dir/foo.js\': __vite_glob_0_1,}

核心代码：

//1.jsconst getAssetsFile = (name) => { const imageModules = import.meta.glob(\'../../assets/images/*.png\', { eager: true }) const src = `../../assets/images/${name}.png` return (imageModules [src]).default}//2.封装getAssetsFile()方法const imageModules = import.meta.glob(\'@/assets/img/**/*\', { eager: true, as: \'url\',//转成url路径});export const getAssetsFile = (relativePath) => { // 统一处理路径格式 const normalized = relativePath.replace(/\\\\/g, \'/\'); const match = Object.entries(imageModules).find(([key]) => key.endsWith(`/${normalized}`) ); return match ? match[1] : undefined;};//3.示例const imageModules: any = import.meta.glob(\'/src/assets/svg/*.svg\', { as: \'url\', // 关键修改：静态导入，直接返回 URL 字符串 eager: true}); const imagesRef = ref({}); console.log(\"imageModules\", imageModules); //直接遍历已解析的 URL 字符串for (const key in imageModules) { const res = imageModules[key]; // res 已经是字符串类型 const chinesePart= key.match(/[\\u4e00-\\u9fa5]+/g)?.[0]; if (chinesePart) { imagesRef.value[chinesePart] = res; }}

需要注意的是, src =../../assets/images/${name}.png中是不支持路劲别名即src= @/assets/images/${name}.png的,必须为绝对路径或者相对路径 

如果代码配置了@符号作为src路径，那么可以写成import.meta.glob(\'@/images/*.png\', {eager: true})，或者直接使用相对路径import.meta.glob(\'../../images/*.png\', {eager: true})

完整代码：

 
  
 import { ref } from \'vue\' const obj = import.meta.glob(\'/src/assets/*.{png,jpg}\', { as: \'url\'}) const imagesRef = ref([]) for (const key in obj) { obj[key]().then((res) => { imagesRef.value.push(res) })}

 import.meta.glob 动态导入图片 不配置  { eager: true }

懒加载动态导入

import { ref, computed, watch, watchEffect } from \'vue\';import dataEggs from \'../src/data.json\';const imageSrc = ref(\'\');const eggType = computed(() => route.params.eggType);const dataEgg = computed(() => dataEggs.find((item) => item.type === eggType.value));// 方式1: // 使用 import.meta.glob 动态导入图片 不配置 { eager: true }const images = import.meta.glob(\'../src/assets/images/*.jpeg\');watchEffect(async () => { if (dataEgg.value && dataEgg.value.image) { const imagePath = `../src/assets/images/${dataEgg.value.image}`; const imageModule = images[imagePath]; if (imageModule) { try { const img = await imageModule(); imageSrc.value = img.default; } catch (error) { console.error(\'Image not found:\', dataEgg.value.image, error); imageSrc.value = \'\'; } } else { console.error(\'Image not found:\', dataEgg.value.image); imageSrc.value = \'\'; } } else { imageSrc.value = \'\'; }});

以上这种方式匹配到的文件默认是懒加载的, 通过动态导入实现,并会在构建时分离为独立的 chunk 文件。如果你倾向于直接引入（同步加载使用）所有的模块，你可以传入 { eager: true } 作为第二个参数`.

import.meta.glob 动态导入图片 ，配置  { eager: true }

同步加载动态导入

// 方式1: // 使用 import.meta.glob 动态导入图片 配置 { eager: true }const images = import.meta.glob(\'../src/assets/images/*.jpeg\', { eager: true });watchEffect(() => { if (dataEgg.value && dataEgg.value.image) { const imagePath = `../src/assets/images/${dataEgg.value.image}`; const imageModule = images[imagePath]; if (imageModule) { // console.log(\'imageModule.default\', imageModule.default); imageSrc.value = imageModule.default; } else { console.error(\'Image not found:\', dataEgg.value.image); imageSrc.value = \'\'; } } else { imageSrc.value = \'\'; }});

 理论知识：

vite官网：点击跳转官网

import.meta.glob的两个参数，第一个参数是静态字符串，第二个参数可以配置一些参数：

import.meta.glob( pattern, // 匹配模式：字符串或字符串数组 { eager?: boolean, // 是否同步导入 import?: string | string[], // 指定导入的内容 query?: string｜Record // 查询参数 })

// 1. 基本异步导入const modules = import.meta.glob(\'./modules/*.ts\')async function loadModules() { // 遍历所有匹配的模块 for (const path in modules) { // 等待模块加载完成 const module = await modules[path]() // 输出模块路径和内容 console.log(\'模块路径:\', path) console.log(\'模块内容:\', module) }}// 2. 同步导入（eager 模式）const eagerModules = import.meta.glob(\'./modules/*.ts\', { eager: true // 设置为 true 表示同步导入})// 3. 导入特定内容const specificImports = import.meta.glob(\'./components/*.vue\', { import: \'default\', // 只导入默认导出 eager: true})// 4. 多种导入内容const multipleImports = import.meta.glob(\'./components/*.vue\', { import: [\'default\', \'setup\'], // 导入多个指定内容 eager: true})// 5. 以 URL 形式导入const imageUrls = import.meta.glob(\'./assets/*.png\', { query: \'?url\' // 作为 URL 导入})// 6. 导入原始内容const rawContents = import.meta.glob(\'./files/*.md\', { query: \'?raw\' // 作为原始文本导入})// 7. 多模式匹配const multiPattern = import.meta.glob([ \'./components/**/*.vue\', // 匹配所有子目录的 Vue 文件 \'!./components/ignored/*.vue\' // 排除特定目录])

(四)、动态导入，包含或不包含子目录，形如:\"/home/homeBg.png\"

(1).不包含子目录，传参形如 :\"/homeBg.png\"

动态导入多个资源文件，这种方式引入的文件必须指定到具体文件夹路径，传入的变量为文件名、文件类型 

例如在assets/images文件下还有一个home文件夹

核心代码：

// 获取assets静态资源export const getAssetsFile = (fileName: string, type = \'png\') => { const path = `/src/assets/images/home/${fileName}.${type}`; const modules: Record = import.meta.glob(\"@/assets/images/home/*.{png,svg,jpg,jpeg}\", { eager: true }); if (modules[path]) return modules[path].default; else { // 地址错误 console.error(\"Error url is wrong path\"); }};

使用示例：

(2).包含子目录，传参形如 :\"/home/homeBg.png\"

动态导入多个资源文件，这种方式可动态设置文件路径，传入的变量为文件名、文件路径、文件类型。

传入的图片包含二级子目录

核心代码：

// 获取assets静态资源const getAssetsFile = (url: string, folder = null, type = \'png\') => { const path = folder ? `/src/assets/images/${folder}/${url}.${type}` : `/src/assets/images/${url}.${type}`; const modules: Record = import.meta.glob(`@/assets/images/**/*.{png,svg,jpg,jpeg}`, { eager: true }); if (modules[path]) return modules[path].default; else { // 地址错误 console.error(\"Error url is wrong path\"); }};

使用示例：

三、前端开发，css引入背景图片

如果是css引入背景图片，一定要使用相对路径。

形如：

.bg-box{
  background-image: url(\'../../assets/images/bg.png\');
}

如果项目做了@代替src目录，可以写成：\'@/assets/images/bg.png\'