ts require is not defined

在Vite中，不能使用require引入图片资源，因为require是Webpack提供的一种加载能力，而Vite使用了自己的静态资源载入方式。你可以使用Vite提供的新方法来处理图片资源的引入。

一个解决方案是使用new URL来处理图片路径。你可以使用以下代码来引入图片资源：

const imgUrl = new URL('./img.png', import.meta.url).href;
document.getElementById('hero-img').src = imgUrl;

另外，你也可以封装一个工具函数来处理图片资源的引入，以节省每次都要写一长串代码的麻烦。在utils文件夹下创建一个require.ts文件，用于处理图片资源引入，例如：

export const require = (imgPath: string) => {
  try {
    const handlePath = imgPath.replace('@', '..');
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};

然后，你可以在你的代码中使用这个工具函数来引入图片资源，例如：

import { require } from '@/utils/require';
const bgImgSrc = require('@/assets/img/loginBg.png');

如果你在HTML中使用Vue模板语法，则可以在模板中使用getAssetsFile方法来处理图片资源的引入，例如：

<el-avatar class="w-6 h-6" :src="getAssetsFile('user.png')" />
<img class="w-6 h-6" :src="getAssetsFile('user.png')" alt="" />

总结起来，Vite中不能直接使用require引入图片资源，你可以使用new URL方法或者封装一个工具函数来处理图片资源的引入。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [解决vue3 + vite + ts 中require失效的问题(require is not defind)](https://blog.csdn.net/qq_37130872/article/details/128133646)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3+ts+vite 引入静态资源require报错](https://blog.csdn.net/weixin_43957384/article/details/128085863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]