背景:
在开发过程中,前端会引入资源文件,这里主要是引入图片。在开发环境,导入的图片显示正常,但是打包部署后,导入的图片就不能正常显示。
原因分析,可能有如下几点:
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
javascriptnew URL(url, import.meta.url).href可以处理大部分图片路径问题
- import.meta.glob
import.meta.glob (批量导入)
用于动态导入多个图片(如遍历目录下所有图片),返回一个模块路径到 URL 的映射对象。
javascriptconst 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
- 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/*
为例:
javascriptconst 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'), }
上面可以看出所有模块都是异步模块,如果有同步加载的需求,可以显式指定第二个参数::
javascriptconst 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'