Vue3学习：vite项目中图片不能显示，报错 require is not defined
今天做了一个案例“给你喜欢的人送花”，如果喜欢谁，就给谁送花，最多可以送5朵。运行效果如下。
这个项目是使用 npm create vite@latest 命令创建的。
包括2个组件：
- 根组件App.vue
- 子组件HelloVote.vue。
目录结构如图所示：
然而在运行这个项目的时候，却出现了问题，App.vue中4张图片不能正常显示。
<template><div class="wrapper"><h2>给你喜欢的人送花</h2><ul><li v-for="(item, index) in list" :key="index"><div class="imgvote"><img :src="item.poet" :alt="item.name"></div><HelloVote :sendto="item.name">喜欢</HelloVote></li></ul></div>
</template>
对应的JavaScript中，代码为
data(){return{list: [{ poet: require('./assets/liu.png'), name: '柳永', },{ poet: require('./assets/su.png'), name: '苏轼', },{ poet: require('./assets/xin.png'), name: '辛弃疾', },{ poet: require('./assets/li.png'), name: '李清照', },]]}
}
查看控制台，报错" require is not defined"，require未定义。
于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。
安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。
后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。
修改后的代码如下：
data() {return {list: [{ poet: new URL(`./assets/liu.png`, import.meta.url).href, name: '柳永', },{ poet: new URL(`./assets/su.png`, import.meta.url).href, name: '苏轼', },{ poet: new URL(`./assets/xin.png`, import.meta.url).href, name: '辛弃疾', },{ poet: new URL(`./assets/li.png`, import.meta.url).href, name: '李清照', },],}},修改前后对比：
//修改前
{ poet: require('./assets/liu.png'), name: '柳永', },
//修改后
{ poet: new URL(`./assets/liu.png`, import.meta.url).href, name: '柳永', },
new URL()这里使用了模板字符串，在本例中，使用普通的单引号或双引号字符串也可以。
只不过模板字符串可以支持动态URL。例如：
function getImageUrl(person) {return new URL(`./assets/${person}.png`, import.meta.url).href
}
这种解决方法来源于vite官网（https://vitejs.cn/vite5-cn/guide/assets.html），感兴趣的话可以前往查看，这是vite官网的部分截图。
案例完整的代码如下：
一、App.vue
<script>
import HelloVote from './components/HelloVote.vue'
export default {data() {return {list: [{ poet: new URL('./assets/liu.png', import.meta.url).href, name: '柳永', },{ poet: new URL('./assets/su.png', import.meta.url).href, name: '苏轼', },{ poet: new URL("./assets/xin.png", import.meta.url).href, name: '辛弃疾', },{ poet: new URL(`./assets/li.png`, import.meta.url).href, name: '李清照', },],// list: [// { poet: require('./assets/liu.png'), name: '柳永', },// { poet: require('./assets/su.png'), name: '苏轼', },// { poet: require('./assets/xin.png'), name: '辛弃疾', },// { poet: require('./assets/li.png'), name: '李清照', },// ],}},components: {HelloVote,},
}
</script>
<template><div class="wrapper"><h2>给你喜欢的人送花</h2><ul><li v-for="(item, index) in list" :key="index"><div class="imgvote"><img :src="item.poet" :alt="item.name"></div><HelloVote :sendto="item.name">喜欢</HelloVote></li></ul></div>
</template>
<style scoped>
ul,
li {list-style: none;
}.wrapper {width: 80vw;margin: 0 auto;display: flex;justify-content: center;flex-direction: column;
}.wrapper ul {display: flex;justify-content: space-between;
}h2 {text-align: center;
}.wrapper li {text-align: center;
}.imgvote {width: 16vw;height: 20vw;margin-bottom: 1rem;
}.imgvote img {width: 100%;height: 100%;border: 1px solid #ccc;
}
</style>
二、HelloVote.vue
<script>
export default {data() {return {count: 0,}},props: ['sendto'],methods: {onClick() {if (this.count < 5) {this.count++;}}},
}
</script>
<template><div><button class="btn" @click="onClick"><slot></slot>{{ sendto }}</button><span>🌹x{{ count }}</span></div>
</template>
<style scoped>
.btn {border: 1px solid #ccc;padding: 5px;border-radius: 5px;cursor: pointer;outline: none;font-size: 16px;width: 110px;
}.btn:hover {background-color: #ff8400;color: #fff;
}
</style>
三、main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')