Vue3:globEager动态加载图片，glob动态添加路由(Vite)

在Vue3项目中，使用Vite作为构建工具时，可以通过vite.config.js配置文件来实现对图片资源的动态导入和动态路由的添加。

对于动态导入图片资源，可以使用Vite提供的import.meta.glob函数。这个函数可以匹配一个路径模式，并且返回一个对象，对象的键是匹配到的文件路径，值是一个函数，调用这个函数会返回一个动态导入的Promise。

对于动态添加路由，可以在Vue Router的路由定义中使用import.meta.glob函数来动态require所有的Vue组件，并生成路由配置。

以下是一个简单的例子：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
// 自动导入views文件夹下的.vue文件，生成路由
const modules = import.meta.globEager('/src/views/*.vue')
 
const routes = Object.keys(modules).map((path) => {
  const name = path.split('/').pop().replace(/\.vue$/, '')
  return { path: `/${name}`, component: modules[`${path}`].default }
})
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  // 配置路由
  router: {
    routes,
  },
})

在组件中动态导入图片资源：

<template>
  <div>
    <img :src="imageSrc" alt="Dynamic Image" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageSrc: ''
    }
  },
  created() {
    this.loadImage('example.png');
  },
  methods: {
    loadImage(name) {
      const imageModule = import.meta.globEager('../assets/images/*.png')
      this.imageSrc = imageModule[`../assets/images/${name}`].default
    }
  }
}
</script>

在这个例子中，我们使用import.meta.globEager来自动导入src/assets/images文件夹下的所有.png图片文件，并通过一个方法loadImage动态加载指定名称的图片。这样可以在构建时确定资源分布，而在运行时动态地加载资源。