在vue 3 + vite中，动态导入本地图片，解决require不生效问题

问题描述

在vue2项目中，我会使用require来实现动态图片的加载，但是，当我把这个代码写入vue3+vite的项目中，结果报错：require is not defined。

报错原因

因为 vite 是一个基于现代浏览器原生ES模块的开发服务器，因此不支持使用 CommonJS（require导入）模块语法。

解决方法

1. 使用 vite 提供的静态资源载入方法。官网静态资源处理

// js定义
const imgURL= (name) => {
  // 注意：不要使用@/assets的写法，可能会出现无法识别@
  return new URL(`/src/assets/img/${name}`, import.meta.url).href;
};
// template使用
<template>
    <img :src="true ? imgURL('XXX.png') : imgURL('XXX.svg')" alt="">
</template>

2. vite 配置 require 插件

安装依赖

npm i vite-plugin-require-transform --save-dev

在 vite.config.js 中进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
  plugins: [
    vue(),
    requireTransform({
      fileRegex: /.js$|.vue$|.png$|.ts$|.jpg$|.svg$/
    }) //配置require
  ]
})