在vue3中 require引入图片的本地资源报错Uncaught (in promise) ReferenceError: require is not defined
<template>
<img :src="imageSrc" alt="My Image"> </template>
<script>
import imageSrc from '@/assets/image.png'; export default { data() { return { imageSrc }; } };
</script>
使用vue3+vite构建的项目使用require会报错
解决方案
一、
使用 @rollup/plugin-commonjs 插件，用于将CommonJS模块转换为ES6模块的Rollup插件.
1、安装@rollup/plugin-commonis 插件
终端中输入
npm i @rollup/plugin-commonjs
2、在vite.config.ts配置中添加该插件，注意 commonjs0必须在vue()上面，否则不生效
import commonjs from '@rollup/plugin-commonjs';
const plugins = [
commonjs() as any,// 要放在第一行，否则不生效
];
3、随意导入commonjs工具包
import SoftAlgorithm from '../SDK/soft-algorithm-min.js';
console.log('引入成功:', SoftAlgorithm);
当consle能打印出来则，引入成功
二、
使用new URL（‘路径’，import.meta.url）.href
用法：
new URL（‘路径’，import.meta.url）.href
pcImage: new URL("@/assets/qy-pc.JPG", import.meta.url).href,
在构建之后相对路径会打包不到具体文件，使用@/解决
"@/assets/qy-pc.JPG"
