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

影子信息2025-07-04 21:19

背景：

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

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

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

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

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

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

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

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

背景：

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

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

代码如下：

javascript 复制代码 
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中无法支持

javascript 复制代码 
// 假设图片在/assets/images下
<img :src="require(`@/assets/images/${xxx}.png`)">

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

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

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

javascript 复制代码 
new URL(url, import.meta.url).href可以处理大部分图片路径问题
  1. import.meta.glob

import.meta.glob （批量导入）

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

javascript 复制代码 
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不可以。

核心代码：
javascript 复制代码 
<img :src="require('@/assets/images/home/home_bg.png')" />

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

实现思路：

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

完整代码：
javascript 复制代码 
<template>
  <img :src="getImageUrl('logo')" />
</template>
 
<script>
  export default {
    methods: {
      getImageUrl(name) {
        // Webpack 会解析 `require` 内的路径，动态拼接时需确保路径可被匹配
        return require(`@/assets/images/${name}.png`); 
      }
    }
  }
</script>

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

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

核心代码：

css 复制代码 
import homeBg from 'src/assets/images/home/home_bg.png'

<img :src="homeBg" />

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

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

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

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

  1. 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文件导入并使用，形如：

<img class="bg-img" :src="getAssetsFile('bg.png')" alt="">

核心代码：
javascript 复制代码 
//utils.js
// 获取assets静态资源
export const getAssetsFile = (url: string) => {
  return new URL(`../assets/images/${url}`, import.meta.url).href;
};
html 复制代码 
//vue
<script setup lang="ts">
 import { getAssetsFile } from 'src/util/utils'
</script>
javascript 复制代码 
//js
<template>
 <img :src="getAssetsFile('homeBg.png')" alt="这是一张图片">
</template>
完整代码：
javascript 复制代码 
<template>
    <div class="coor-table-box">
            <img :src="getAssetsFile('homeBg.png')" />
    </div>
</template>
<script setup>
import { getAssetsFile } from '@/utils'
</script>
(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 函数从文件系统导入多个模块：

javascript 复制代码 
const modules = import.meta.glob('./dir/*.js')

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

javascript 复制代码 
const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
Glob导入注意事项：

注意事项：

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

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

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

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

const path = './components'

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

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

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

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

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

实现思路:

import.meta.glob （批量导入）

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

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

javascript 复制代码 
const modules = import.meta.glob('../../assets/images/*.png')
console.log('modules', modules)

控制台打印是这样的：

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

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

javascript 复制代码 
const modules = import.meta.glob('./dir/*.js', { eager: true })

控制台打印是这样的：

javascript 复制代码 
// 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,
}
核心代码：
javascript 复制代码 
//1.js
const 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})

完整代码：
javascript 复制代码 
<template>
  <div>
    <img
      v-for="(image, index) in imagesRef"
      :key="index"
      :src="image"
      alt="dynamic image"
      width="100"
      height="100"
    />
  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
 
const obj = import.meta.glob('/src/assets/*.{png,jpg}', {
  as: 'url'
})
 
const imagesRef = ref<string[]>([])
 
for (const key in obj) {
  obj[key]().then((res) => {
    imagesRef.value.push(res)
  })
}
</script>
import.meta.glob 动态导入图片 不配置 { eager: true }

懒加载动态导入

javascript 复制代码 
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 }

同步加载动态导入

javascript 复制代码 
// 方式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的两个参数，第一个参数是静态字符串，第二个参数可以配置一些参数：
javascript 复制代码 
import.meta.glob(
  pattern, // 匹配模式：字符串或字符串数组 
  {
    eager?: boolean, // 是否同步导入
    import?: string | string[], // 指定导入的内容
    query?: string｜Record<string, string | number | boolean > // 查询参数 
  }
)
javascript 复制代码 
// 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文件夹

核心代码：

javascript 复制代码 
// 获取assets静态资源
export const getAssetsFile = (fileName: string, type = 'png') => {
  const path = `/src/assets/images/home/${fileName}.${type}`;
  const modules: Record<string, any> = 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");
  }
};

使用示例：

javascript 复制代码 
<img :src="getAssetsFile('homeBg','png')" />
(2).包含子目录，传参形如 :"/home/homeBg.png"

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

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

核心代码：

javascript 复制代码 
// 获取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<string, any> = 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");
  }
};

使用示例：

javascript 复制代码 
<img :src="getAssetsFile('homeFile','homeBg','png')" />

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

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

形如：

.bg-box{

background-image: url('../../assets/images/bg.png');

}

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

相关推荐
爱编程的喵4 分钟前
深入理解JSX：从语法糖到React的魔法转换
前端·react.js
代码的余温13 分钟前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi22 分钟前
JavaScript - 策略模式在开发中的应用
前端
xptwop24 分钟前
05-ES6
前端·javascript·es6
每天开心25 分钟前
告别样式冲突：CSS 模块化实战
前端·css·代码规范
wxjlkh28 分钟前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺29 分钟前
单页应用路由：从 Hash 到懒加载
前端·react.js·性能优化
每天开心29 分钟前
噜噜旅游App(3)——打造个性化用户中心：AI生成头像与交互设计
前端·前端框架
Heo30 分钟前
调用通义千问大模型实现流式对话
前端·javascript·后端
绅士玖31 分钟前
移动端自适应方案：lib-flexible + postcss-pxtorem 实践指南
前端
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02vue数据变化但页面不变03全球最强模型Grok4，国内已可免费使用！（附教程）04KGG转MP3工具|非KGM文件|解密音频05干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！06【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致07扣子开源本地部署教程 丨Coze智能体小白喂饭级指南08ChatGPT Agent 完全使用指南：2025年7月最新功能详解09《魔兽世界》提示lua警告的含义及解决方法10这次领先Cursor！体验了Trae 2.0 SOLO 模式，超酷！