前言

项目中遇到一个场景，页面的标题栏结构基本相同，只是图片需要动态改变，不同类型的页面，进入后，加载不同的图片。

一、静态导入

代码示例

c 复制代码

      <img :src="imgt" alt="">
      
      import img from '@/common/assets/images/base-info/org-user-edit.png'

如果用静态导入的方式，那么就需要穷举所有可能情况，把所有图片都导入，然后加载，显然并不优雅。如果这个组件用在更多的模块，穷举的方式可能还会造成高耦合。

二、import函数

c 复制代码

import(`/src/common/assets/images/base-info/${props.titleImg}`).then(res=>{
  console.log(res)
})

写文章这部分的时候，中文官网挂了，只能贴英文的截图了：

文档翻译：vite支持原生import函数，但是变量中只能有一层文件路径，也就是说如果写成"import(${xxx}/common/assets/images/base-info/${props.titleImg})"或者titleImg是多层文件，例如：xxx/xxx.png，都会报错
尽量不要在script中直接写await语法糖，否则容易造成一些不可预知的问题。比如说template已经渲染完毕，而函数部分阻塞，导致props中的变量无法解析，依赖props渲染的dom，可能会有异常。
这样写有可能vite会报错：

The above dynamic import cannot be analyzed by Vite. See github.com/rollup/plug... for supported dynamic import formats. If this is intended to be left as-is, you can use the / @vite-ignore / comment inside the import() call to suppress this warning.

其实这是不用管的，如果感觉碍眼，可以增加vite忽略：/* @vite-ignore */，修改上面的代码为：

c 复制代码

import(/* @vite-ignore */`/src/common/assets/images/base-info/${props.titleImg}`).then(res=>{
  pathr.value=res.default
})

三、new URL(url, import.meta.url)

这是vite官网介绍的一种方式，官网原文对它的介绍是： ==import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL== 简单来说，就是通过当前模块的路径【import.meta.url】配合相对路径【url】，就能获取到绝对路径。

c 复制代码

const path=new URL('../../',import.meta.url).href

在哪个模块调用上面的代码，就是得到模块祖父级文件的绝对路径。

四、import.meta.glob

最后介绍glob的方式。这是vite官网介绍的一种方式，官网介绍如下： import.meta.glob可以得到一个json对象，对象的keys由符合条件的绝对路径组成，对应的value是函数，返回一个promise对象，所以根据路径筛选符合条件的json元素，然后运行对应的函数，就能得到资源。

获取对应目录下的所有图片地址：

c 复制代码

const getPathFn=import.meta.glob('@/common/assets/images/base-info/**')[`/src/common/assets/images/base-info1/${props.titleImg}`]
if(getPathFn){
  getPathFn().then(res=>{
    console.log(res.default)
  })
}

我推荐这种方式，因为它限制更少，功能全面。

总结

遇到问题，查官网。官网不懂，问博主。

vue+vite项目，无法使用绝对地址动态导入

前言

一、静态导入

二、import函数

三、new URL(url, import.meta.url)

四、import.meta.glob

总结