背景：

文章講述了Vite框架中關于資源文件（如圖片）在默認配置下，如何正確處理開發環境和打包后的不同引用方式。重點介紹了使用import.meta.url和new URL() 來動態獲取并處理靜態資源URL的方法，以及注意事項，如SSR不支持的情況。

new URL(`../assets/images/${name}`, import.meta.url).href

使用原生的new URL() 實現靜態資源的動態引入

一、vue3+vite5有效?

封裝方法：

//封裝方法
export const getAssetsFile = (name) => {return new URL(`../assets/images/${name}`, import.meta.url).href;
};

靜態圖片放在src文件夾下的具體位置：../assets/images/common/model-title.png?

//調用封裝的getAssetsFile()方法<img :src="getAssetsFile('common/model-title.png')" />

控制臺打印：

?

其它：

1.import.meta是詳細介紹：

參考鏈接：import.meta的詳細介紹

?

?2.new URL(url,import.meta.url)的詳細介紹

vite官網鏈接：vite官網的參考鏈接

二、vue3+vite6無效及解決辦法?

之前能夠使用，但是最新創建的項目就不能使用了，問題如下：

?

?解決辦法：

雖然不知道為什么，但是好在頁面上顯示出來了：

總結：

new URL(url變量，import.meta.url)?

//封裝方法
export const getAssetsFile = (name) => {const url = `../assets/images/${name}`;return new URL(url, import.meta.url).href;
};

?