vue前端動(dòng)態(tài)導(dǎo)入文件之import.meta.glob導(dǎo)入圖片詳細(xì)過程
背景：
在開發(fā)過程中，前端會(huì)引入資源文件，這里主要是引入圖片。在開發(fā)環(huán)境，導(dǎo)入的圖片顯示正常，但是打包部署后，導(dǎo)入的圖片就不能正常顯示。
原因分析，可能有如下幾點(diǎn)：
1.圖片不能顯示，可能的后端對(duì)圖片代理出錯(cuò)【后端問題】
2.圖片不能顯示，可能是前端打包配置參數(shù)出錯(cuò)【前端問題】
3.可以通過查看<img>標(biāo)簽綁定的src路徑判斷是誰的問題
開發(fā)環(huán)境和生產(chǎn)環(huán)境，圖片都正常顯示，綁定圖片src如下：
開發(fā)環(huán)境正常顯示圖片，生產(chǎn)環(huán)境不正常，如果綁定的src一致，則前端打包出錯(cuò)，具體出錯(cuò)在：vite打包靜態(tài)資源文件，通過封裝的getAssetsFile()方法，這里的build.target 不支持import.meta.url 時(shí)導(dǎo)致運(yùn)行出錯(cuò)。
一、開發(fā)環(huán)境和生產(chǎn)環(huán)境不同，所以圖片的src不一致
背景：
在做項(xiàng)目的時(shí)候，在 vue3+vite 項(xiàng)目中，動(dòng)態(tài)引入圖片，在開發(fā)環(huán)境中的時(shí)候,圖片可以正常顯示,但是打包構(gòu)建后,部署生產(chǎn)不能正常顯示圖片，通過排查，發(fā)現(xiàn)生產(chǎn)環(huán)境的圖片綁定的src和開發(fā)環(huán)境的一樣【問題出在這兒】，build配置打包的參數(shù)如下：
vite.config.js配置是“打包配置build”，配置參數(shù)如下：
代碼如下：
build: {
minify: 'terser',
outDir: 'dist', // 打包輸出文件名
sourcemap: false,
assetsDir: 'static', // 指定生成靜態(tài)資源的存放路徑
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];
}
}
},
// 靜態(tài)資源打包做處理
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: {
// 去掉注釋內(nèi)容
comments: false
}
}
}備注：打包后的靜態(tài)資源的路徑必改變，并且對(duì)靜態(tài)資源使用了哈希hash，打包+資源哈希 =>導(dǎo)致了 路徑必改變。因?yàn)樵谏a(chǎn)構(gòu)建時(shí)，vite會(huì)進(jìn)行必要的轉(zhuǎn)換，包括對(duì)靜態(tài)資源的URL打包和資源哈希。經(jīng)過打包和資源哈希后，這個(gè)URL不會(huì)和原樣一樣；如果保持一樣，那就是在build.target不支持import.meta.url【問題所在】
官網(wǎng)鏈接：vite官網(wǎng)
寫到這兒。。。你就能知道為什么開發(fā)環(huán)境圖片能正常顯示，但生產(chǎn)環(huán)境的圖片不能正常顯示。
以下是解決方式。。。
二、前端開發(fā)，動(dòng)態(tài)導(dǎo)入資源的幾種方式
vue2 版本的時(shí)候,使用的是require來引入圖片，打包構(gòu)建工具是webpack；vue3版本的時(shí)候，使用的構(gòu)建工具是vite腳手架，所以需要使用import.meta.glob來引入圖片，并且需要使用new URL來獲取圖片的路徑。
總結(jié)：Vue2和vue3 在動(dòng)態(tài)導(dǎo)入圖片的核心差異主要體現(xiàn)在 構(gòu)建工具（Webpack vs Vite）的處理方式 上，框架對(duì)靜態(tài)資源的導(dǎo)入的底層邏輯未改變。
前端導(dǎo)入動(dòng)態(tài)資源的精簡思路：
在前端開發(fā)中，動(dòng)態(tài)導(dǎo)入資源，導(dǎo)入
使用import.meta.glob。
在webpack或者vue-cli構(gòu)建的vue2項(xiàng)目，可以使用require引入，例如：
注意：require僅支持在webpack環(huán)境中使用,vite中無法支持
// 假設(shè)圖片在/assets/images下
<img :src="require(`@/assets/images/${xxx}.png`)">在vite或者vue3，構(gòu)建工具通常搭配vite，引入圖片new URL() + import.meta.url
注意：Vite 基于原生 ES 模塊，對(duì)靜態(tài)資源的處理更靈活，支持兩種主流動(dòng)態(tài)導(dǎo)入方式：
1.new URL() + import.meta.url
new URL(url, import.meta.url).href可以處理大部分圖片路徑問題
2. import.meta.glob
import.meta.glob （批量導(dǎo)入）
用于動(dòng)態(tài)導(dǎo)入多個(gè)圖片（如遍歷目錄下所有圖片），返回一個(gè)模塊路徑到 URL 的映射對(duì)象。
const modules = import.meta.glob('../../assets/images/*.png')前端導(dǎo)入動(dòng)態(tài)資源的詳細(xì)思路：
分以下幾個(gè)思路書寫：
(一)、在webpack或者vue-cli或者vue2，構(gòu)建工具通常搭配webpack。引入圖片使用require
(二)、在vue2或vue3中，將url資源路徑使用字面量替換，即用一個(gè)變量代替url路徑字符串。
(三)、在vite或者vue3，構(gòu)建工具通常搭配vite，引入圖片new URL() + import.meta.url
(四)、動(dòng)態(tài)導(dǎo)入，包含或不包含子目錄，形如:"/home/homeBg.png"。以及封裝的幾種方法
(一)、在webpack或者vue-cli或者vue2【通常搭配webpack】引入圖片使用require
在webpack、vue-cli或者vue2項(xiàng)目中，使用require可以，vite或者vue3不可以。
核心代碼：
<img :src="require('@/assets/images/home/home_bg.png')" />在vite或者vue3中，通過require動(dòng)態(tài)引入， 發(fā)現(xiàn)報(bào)錯(cuò)：require is not defind，這是因?yàn)?require 是屬于 Webpack 的方法。vue3前端框架使用的是vite，vite和webpack不一樣，vite不能使用require()導(dǎo)入資源文件，vite基于原生 ES 模塊，對(duì)靜態(tài)資源的處理更靈活，用import的方式導(dǎo)入資源文件。
實(shí)現(xiàn)思路：
Webpack 通過 require 函數(shù)識(shí)別靜態(tài)資源路徑，并在構(gòu)建時(shí)將圖片復(fù)制到輸出目錄，同時(shí)生成正確的路徑。 動(dòng)態(tài)導(dǎo)入方式 ：必須使用 require 包裹動(dòng)態(tài)路徑（否則會(huì)被視為普通字符串，導(dǎo)致 404）。
完整代碼：
<template>
<img :src="getImageUrl('logo')" />
</template>
<script>
export default {
methods: {
getImageUrl(name) {
// Webpack 會(huì)解析 `require` 內(nèi)的路徑，動(dòng)態(tài)拼接時(shí)需確保路徑可被匹配
return require(`@/assets/images/${name}.png`);
}
}
}
</script>(二)、在vue2或vue3中，將url資源路徑使用字面量替換
此方法適用于單個(gè)資源文件，如果有多個(gè)，需要多次引入且不重合。
核心代碼：
import homeBg from 'src/assets/images/home/home_bg.png' <img :src="homeBg" />
(三)、在vite或者vue3【通常搭配vite】引入圖片new URL() + import.meta.url
此方法適用于多個(gè)資源文件，動(dòng)態(tài)傳入文件路徑。
Vite 基于原生 ES 模塊，對(duì)靜態(tài)資源的處理更靈活，支持兩種主流動(dòng)態(tài)導(dǎo)入方式：
1.new URL() + import.meta.url
2. import.meta.glob
(1).動(dòng)態(tài)導(dǎo)入new URL() + import.meta.url
在 new URL() 方法中，import.meta.url 是一個(gè)特殊的變量，它表示當(dāng)前模塊的 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 ;//詳細(xì)
這里面的
href值即為當(dāng)前圖片地址
new URL(url, import.meta.url).href可以處理大部分圖片路徑問題
實(shí)現(xiàn)思路：
在src目錄下創(chuàng)建一個(gè)util文件夾，文件夾里創(chuàng)建一個(gè)utils.js文件
在utils.js文件定義并暴露一個(gè)getAssetsFile()方法
在vue文件導(dǎo)入并使用，形如：
<img class="bg-img" :src="getAssetsFile('bg.png')" alt="">
核心代碼：
//utils.js
// 獲取assets靜態(tài)資源
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。這個(gè)方法一般用于批量引入js或者ts文件，但實(shí)際上這個(gè)方法就是 很多import語句的集合而已，import是可以引入圖片的，所以import.meta.glob 也同樣可以引入圖片資源，只不過需要加入配置項(xiàng) as:'url' 就可以了。
Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導(dǎo)入多個(gè)模塊（該方式為異步加載模塊形式），該函數(shù)接收一個(gè)匹配模塊文件的通配符，返回一個(gè)對(duì)象，其中鍵是文件路徑，值是可以導(dǎo)入相應(yīng)模塊的函數(shù)。
Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導(dǎo)入多個(gè)模塊：
const modules = import.meta.glob('./dir/*.js')import.meta.glob也支持多個(gè)匹配模式化【支持?jǐn)?shù)組】
const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
Glob導(dǎo)入注意事項(xiàng)：
注意事項(xiàng)：
1.
// 正確用法 const modules = import.meta.glob('./components/*.vue')
// 錯(cuò)誤用法 - 不支持動(dòng)態(tài)路徑
// import.meta.glob 的參數(shù)都必須以字面量傳入。
// 你不可以在其中使用變量或表達(dá)式。
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 })
實(shí)現(xiàn)思路:
import.meta.glob （批量導(dǎo)入）
用于動(dòng)態(tài)導(dǎo)入多個(gè)圖片（如遍歷目錄下所有圖片），返回一個(gè)模塊路徑到 URL 的映射對(duì)象。
以
./src/assets/images/*為例：
const modules = import.meta.glob('../../assets/images/*.png')
console.log('modules', modules)控制臺(tái)打印是這樣的：
// vite 生成的代碼
const modules = {
'./dir/bar.js': () => import('./dir/bar.js'),
'./dir/foo.js': () => import('./dir/foo.js'),
}上面可以看出所有模塊都是異步模塊,如果有同步加載的需求,可以顯式指定第二個(gè)參數(shù):：
const modules = import.meta.glob('./dir/*.js', { eager: true })控制臺(tái)打印是這樣的：
// 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',//轉(zhuǎn)成url路徑
});
export const getAssetsFile = (relativePath) => {
// 統(tǒng)一處理路徑格式
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', // 關(guān)鍵修改：靜態(tài)導(dǎo)入，直接返回 URL 字符串
eager: true
});
const imagesRef = ref({});
console.log("imageModules", imageModules);
//直接遍歷已解析的 URL 字符串
for (const key in imageModules) {
const res = imageModules[key]; // res 已經(jīng)是字符串類型
const chinesePart= key.match(/[\u4e00-\u9fa5]+/g)?.[0];
if (chinesePart) {
imagesRef.value[chinesePart] = res;
}
}需要注意的是, src =../../assets/images/${name}.png中是不支持路勁別名即src= @/assets/images/${name}.png的,必須為絕對(duì)路徑或者相對(duì)路徑
如果代碼配置了@符號(hào)作為src路徑，那么可以寫成import.meta.glob('@/images/*.png', {eager: true})，或者直接使用相對(duì)路徑import.meta.glob('../../images/*.png', {eager: true})
完整代碼：
<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 動(dòng)態(tài)導(dǎo)入圖片 不配置 { eager: true }
懶加載動(dòng)態(tài)導(dǎo)入
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 動(dòng)態(tài)導(dǎo)入圖片 不配置 { 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 = '';
}
});以上這種方式匹配到的文件默認(rèn)是懶加載的, 通過動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn),并會(huì)在構(gòu)建時(shí)分離為獨(dú)立的 chunk 文件。如果你傾向于直接引入（同步加載使用）所有的模塊，你可以傳入 { eager: true } 作為第二個(gè)參數(shù)`.
import.meta.glob 動(dòng)態(tài)導(dǎo)入圖片 ，配置 { eager: true }
同步加載動(dòng)態(tài)導(dǎo)入
// 方式1: // 使用 import.meta.glob 動(dòng)態(tài)導(dǎo)入圖片 配置 { 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 = '';
}
});理論知識(shí)：
vite官網(wǎng)：點(diǎn)擊跳轉(zhuǎn)官網(wǎng)
import.meta.glob的兩個(gè)參數(shù)，第一個(gè)參數(shù)是靜態(tài)字符串，第二個(gè)參數(shù)可以配置一些參數(shù)：
import.meta.glob(
pattern, // 匹配模式：字符串或字符串?dāng)?shù)組
{
eager?: boolean, // 是否同步導(dǎo)入
import?: string | string[], // 指定導(dǎo)入的內(nèi)容
query?: string｜Record<string, string | number | boolean > // 查詢參數(shù)
}
)// 1. 基本異步導(dǎo)入
const modules = import.meta.glob('./modules/*.ts')
async function loadModules() {
// 遍歷所有匹配的模塊
for (const path in modules) {
// 等待模塊加載完成
const module = await modules[path]()
// 輸出模塊路徑和內(nèi)容
console.log('模塊路徑:', path)
console.log('模塊內(nèi)容:', module)
}
}
// 2. 同步導(dǎo)入（eager 模式）
const eagerModules = import.meta.glob('./modules/*.ts', {
eager: true // 設(shè)置為 true 表示同步導(dǎo)入
})
// 3. 導(dǎo)入特定內(nèi)容
const specificImports = import.meta.glob('./components/*.vue', {
import: 'default', // 只導(dǎo)入默認(rèn)導(dǎo)出
eager: true
})
// 4. 多種導(dǎo)入內(nèi)容
const multipleImports = import.meta.glob('./components/*.vue', {
import: ['default', 'setup'], // 導(dǎo)入多個(gè)指定內(nèi)容
eager: true
})
// 5. 以 URL 形式導(dǎo)入
const imageUrls = import.meta.glob('./assets/*.png', {
query: '?url' // 作為 URL 導(dǎo)入
})
// 6. 導(dǎo)入原始內(nèi)容
const rawContents = import.meta.glob('./files/*.md', {
query: '?raw' // 作為原始文本導(dǎo)入
})
// 7. 多模式匹配
const multiPattern = import.meta.glob([
'./components/**/*.vue', // 匹配所有子目錄的 Vue 文件
'!./components/ignored/*.vue' // 排除特定目錄
])(四)、動(dòng)態(tài)導(dǎo)入，包含或不包含子目錄，形如:"/home/homeBg.png"
(1).不包含子目錄，傳參形如 :"/homeBg.png"
動(dòng)態(tài)導(dǎo)入多個(gè)資源文件，這種方式引入的文件必須指定到具體文件夾路徑，傳入的變量為文件名、文件類型
例如在assets/images文件下還有一個(gè)home文件夾
核心代碼：
// 獲取assets靜態(tài)資源
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 {
// 地址錯(cuò)誤
console.error("Error url is wrong path");
}
};使用示例：
<img :src="getAssetsFile('homeBg','png')" />(2).包含子目錄，傳參形如 :"/home/homeBg.png"
動(dòng)態(tài)導(dǎo)入多個(gè)資源文件，這種方式可動(dòng)態(tài)設(shè)置文件路徑，傳入的變量為文件名、文件路徑、文件類型。
傳入的圖片包含二級(jí)子目錄
核心代碼：
// 獲取assets靜態(tài)資源
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 {
// 地址錯(cuò)誤
console.error("Error url is wrong path");
}
};使用示例：
<img :src="getAssetsFile('homeFile','homeBg','png')" />三、前端開發(fā)，css引入背景圖片
如果是css引入背景圖片，一定要使用相對(duì)路徑。
形如：
.bg-box{
background-image: url('../../assets/images/bg.png');
}如果項(xiàng)目做了@代替src目錄，可以寫成：'@/assets/images/bg.png'
總結(jié)
到此這篇關(guān)于vue前端動(dòng)態(tài)導(dǎo)入文件之import.meta.glob導(dǎo)入圖片的文章就介紹到這了,更多相關(guān)vue import.meta.glob導(dǎo)入圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue3使用threejs實(shí)現(xiàn)3D卡片水平旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實(shí)現(xiàn)3D卡片水平旋轉(zhuǎn)效果,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue中的錨點(diǎn)定位問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)現(xiàn)獲取剪切板內(nèi)容的兩種方法
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)獲取剪切板內(nèi)容的兩種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2025-02-02
在Store倉庫里，state就是用來存放數(shù)據(jù)。如果很多組件都使用這個(gè)過濾后的數(shù)據(jù)，我們是否可以把這個(gè)數(shù)據(jù)抽提出來共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計(jì)算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下2022-01-01
uniapp仿微信聊天界面效果實(shí)例(vue3組合式版本)
這篇文章主要介紹了uniapp仿微信聊天界面的相關(guān)資料,這里提及了一個(gè)時(shí)間工具包timeMethod.js,該工具包可能提供了一系列時(shí)間處理的功能,如格式化日期、計(jì)算時(shí)間差等,以便在消息格式中正確展示時(shí)間信息,使用此類工具包可以大大提高開發(fā)效率,需要的朋友可以參考下2024-10-10
這篇文章主要給大家介紹了關(guān)于vue中路由參數(shù)傳遞遇到的坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
CryptoJS是一個(gè)強(qiáng)大的JavaScript庫,它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護(hù)數(shù)據(jù)安全,防止信息泄露,通過簡單的安裝和函數(shù)編寫,本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧2024-10-10
在Vue中Refs是對(duì)DOM元素或已安裝到DOM的其他組件實(shí)例的引用,下面這篇文章主要給大家介紹了關(guān)于Vue3中refs使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
基于Vue 和 iView分片上傳功能實(shí)現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過將文件拆分成多個(gè)小塊并逐塊上傳,解決了大文件上傳時(shí)的諸多問題,如上傳速度慢、超時(shí)和網(wǎng)絡(luò)中斷等,它還展示了如何實(shí)現(xiàn)分片上傳的進(jìn)度顯示、錯(cuò)誤處理和斷點(diǎn)續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧2025-01-01