說(shuō)明
原本我們?cè)趘ue2時(shí)代，可以使用require 導(dǎo)入靜態(tài)資源，如下所示
<template>
<div>
<div> test頁(yè)面 </div>
</div>
</template>
<script>
export default {
name: "globe",
data() {
return {
globe: {
baseTexture: require('@/assets/echarts/earth.jpg'),
environment: require('@/assets/echarts/starfield.jpg'),
}
},
methods: {
},
}
</script>
但在vue3中的vite沒(méi)有require方法定義的使用，說(shuō)白了就是不使用require方法進(jìn)行資源的導(dǎo)入，而是使用新的方法。詳情請(qǐng)看官網(wǎng)。
Vite官網(wǎng)
我這里提供兩種方法：
方法1：
使用 import導(dǎo)入資源
<template>
<div>
<div> test頁(yè)面 </div>
</div>
</template>
<script setup>
import img_echarts from '@/assets/echarts/earth.jpg'
import img_bg from '@/assets/echarts/starfield.jpg'
const globe = {
baseTexture: img_echarts ,
environment: img_bg ,
}
}
</script>
方法2：
直接使用 new URL(url, import.meta.url) 語(yǔ)法
<template>
<div>
<div> test頁(yè)面 </div>
</div>
</template>
<script setup>
const globe = {
baseTexture: new URL('@/assets/echarts/earth.jpg', import.meta.url).href ,
environment: new URL('@/assets/echarts/starfield.jpg', import.meta.url).href ,
}
}
</script>
END文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-535540.html
PS：來(lái)人啊，把坑埋了！打道回府。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-535540.html
到了這里，關(guān)于ReferenceError: require is not defined 【vue3 +vite +setup語(yǔ)法使用報(bào)錯(cuò)】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Vue.js報(bào)錯(cuò)問(wèn)題解決：[Vue warn]: Error in v-on handler: “ReferenceError: XXX is not defined“.](https://imgs.yssmx.com/Uploads/2024/02/540174-1.jpeg)
