vue 前端動態導入文件 import.meta.glob 導入圖片

背景：

在開發過程中，前端會引入資源文件，這里主要是引入圖片。在開發環境，導入的圖片顯示正常，但是打包部署后，導入的圖片就不能正常顯示。

原因分析，可能有如下幾點：

1.圖片不能顯示，可能的后端對圖片代理出錯【后端問題】

2.圖片不能顯示，可能是前端打包配置參數出錯【前端問題】

3.可以通過查看<img>標簽綁定的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和debuggercompress: {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下
<img :src="require(`@/assets/images/${xxx}.png`)">
在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不可以。

核心代碼：

<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）。

完整代碼：

<template><img :src="getImageUrl('logo')" />
</template><script>export default {methods: {getImageUrl(name) {// Webpack 會解析 `require` 內的路徑，動態拼接時需確保路徑可被匹配return require(`@/assets/images/${name}.png`); }}}
</script>

(二)、在vue2或vue3中，將url資源路徑使用字面量替換

此方法適用于單個資源文件，如果有多個，需要多次引入且不重合。

核心代碼：

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

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

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

核心代碼：

//utils.js
// 獲取assets靜態資源
export const getAssetsFile = (url: string) => {return new URL(`../assets/images/${url}`, import.meta.url).href;
};

//vue
<script setup lang="ts">import { getAssetsFile } from 'src/util/utils'
</script>

//js
<template><img :src="getAssetsFile('homeBg.png')" alt="這是一張圖片">
</template>

完整代碼：

<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?函數從文件系統導入多個模塊：

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

import.meta.glob也支持多個匹配模式化【支持數組】

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`) // ?

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<ModuleType>('./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.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})

完整代碼：

<template><div><imgv-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 }

懶加載動態導入

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<string, string | number | boolean > // 查詢參數 }
)

// 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<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");}
};

使用示例：

<img :src="getAssetsFile('homeBg','png')" />

(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<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");}
};

使用示例：

<img :src="getAssetsFile('homeFile','homeBg','png')" />

三、前端開發，css引入背景圖片

如果是css引入背景圖片，一定要使用相對路徑。

形如：

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

如果項目做了@代替src目錄，可以寫成：'@/assets/images/bg.png'