vue3中使用require导入图片

最新推荐文章于 2025-09-23 22:58:16 发布

原创最新推荐文章于 2025-09-23 22:58:16 发布 · 3.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

在Vite构建的Vue3项目中，由于其工作原理，不能直接使用require来导入图片。官方文档推荐了一种方法：定义一个require函数，利用import.meta.url和URLAPI来处理静态资源路径。首先，创建一个函数将图片路径转换为URL，然后在需要的地方导入或全局使用这个函数。

因为vite构建的vue3项目，无法使用require导入图片，需要处理。

官方文档：静态资源处理 {#static-asset-handling} | Vite中文网

1、定义一个require方法

export const require = (imgPath) => {
  try {
    const handlePath = imgPath.replace('@', '..');
    // https://vitejs.cn/guide/assets.html#the-public-directory
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};

2.导入到当前页或注册为全局方法使用