vue项目如何引入文件夹下全部文件?

一.webpack项目,通过webpack的require.context(path)引入

webpack官方文档

通过该方法能够拿到Context,内含两个API: keys, resolve, 调用keys获取文件名数组,resolve获取文件路径,一般是./src开头,也可以直接调用Context,传入key即可获取对应实例

例如

// 文件树
images
  ├─common.png
  ├─drone.png
  ├─home.png
  ├─industrial.png
  ├─iotSense.png.png
  ├─population.png
  ├─project.png
  ├─spaceBase.png
  └─visual.png
  
// 获取Context
const context = require.context('@/assets/images')
// 获取文件名列表
const keys = context.keys()
// 获取文件路径列表
const urls = context.resolve()
// 获取所有文件数据列表 => 使用 context(key)
const values = context.keys().map(key => context(key))

二.vite项目,通过import.meta.glob(path)引入 官方文档