Vite/Vue 3 解决 require 未定义：使用图像源作为道具的终极指南

2024-03-17 16:33:55

如何在 Vite/Vue 3 中解决使用图像源作为道具时的“require 未定义”错误

作为一名经验丰富的程序员，我在使用 Vite CLI 和 Vue 3 时遇到了一个常见错误：“Uncaught ReferenceError: require is not defined”。这个问题出现在将图像源作为道具使用时，让我非常抓狂。经过一番探索，我找到了一个简单的解决方案，我很高兴与大家分享。

问题根源

在 Vite CLI 和 Vue 3 中，SFC Script setup API 不支持直接使用 require() 函数。因此，当你尝试使用 require() 函数从图像文件中导入源时，就会遇到“require 未定义”错误。

解决方案

为了解决这个问题，我们需要使用 import.meta.glob() 函数。此函数允许我们动态导入图像源，而无需使用 require() 函数。以下是步骤：

1. 使用 import.meta.glob()

import.meta.glob() 函数可以动态导入匹配指定模式的文件。在本例中，我们将使用它来导入所有 .png 文件：

const imagePath = import.meta.globEager('../assets/*.png');

2. 从对象中获取图像源

import.meta.globEager() 返回一个包含所有匹配文件路径和内容的对象。我们可以从该对象中获取所需的图像源：

const imageSource = imagePath[`./assets/${props.imagePath}`];

3. 在模板中使用图像源

最后，可以在模板中使用 imageSource 变量作为 img 标签的 src 属性值：

<img :src="imageSource" />

示例代码

以下是完整代码示例：

<script setup>
import { defineProps } from 'vue';
import { import.meta.globEager } from 'esbuild';

const props = defineProps({
  imagePath: { type: String, required: true },
});

const imagePath = import.meta.globEager('../assets/*.png');
const imageSource = imagePath[`./assets/${props.imagePath}`];
</script>

<template>
  <img :src="imageSource" />
</template>