在Vite中使用require

最近在Vite项目中引入使用require引入静态资源时遇到了报错。

翻阅资料才发现问题所在，这是因为 require 是属于 Webpack 的方法，而我使用的是 Vite，所以我们需要去寻找 Vite 静态资源处理的方法，我在Vite官网中发现了解决办法。
Vite官网

所以，我们只需要将代码改写以下形式即可。

template

<CarouselItem v-for="(item,index) of carouselData" :key="index">
    <img :src="getImageUrl(item.img_name)" />
</CarouselItem>

script

setup() {
    
    
    const getImageUrl = (name) => {
    
    
        return new URL(`../../lib/Carousel/assets/${
      
      name}`, import.meta.url).href
    }
  return {
    
    
        carouselData,
    getImageUrl
  }
}

但是这么写又很不方便，感觉有点别扭，所以我又找到一个插件可以使用 require。vite-plugin-require-transform
安装

yarn add -D vite-plugin-require-transform
或者
npm i vite-plugin-require-transform --save-dev

然后vite.config.js中配置

import {
    
     defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
    
    
  plugins: [
    requireTransform({
    
    
      fileRegex: /.js$|.vue$/
    }),
  ],
});

这样就可以正常使用require了。