问vite打包？

在 Vite + Vue3 + Typescript 项目中，默认情况下，只有 CSS 中用作背景图的图片会被 Vite 进行打包处理。这是因为 Vite 在处理 CSS 文件时会分析其中的背景图并进行处理，将图片进行优化、打包，并生成对应的路径。但是，对于 <img> 标签里的图片，Vite 不会主动进行处理。

解决这个问题的方法是使用 import 导入图片，并在 Vue 组件中引用这些图片。这样 Vite 就会将这些图片作为模块处理，并正确进行打包。

下面是一个示例：

在 Vue 组件中：

<template>
  <div>
    <!-- 使用 require 导入图片 -->
    <img :src="logo" alt="yifan-online.logo">
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import logo from './assets/logo.png';

export default defineComponent({
  data() {
    return {
      logo: logo,
    };
  },
});
</script>

在上述示例中，我们使用 import 导入图片 logo.png，并在组件中引用它。此时，Vite 将会处理这个图片，并进行打包。注意要根据具体的项目路径和文件名设置正确的路径。

使用这种方式，<img> 标签里的图片就能够被 Vite 打包并正常显示了。