背景：

文章讲述了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;
};