说明
原本我们在vue2时代,可以使用require 导入静态资源,如下所示
<template>
<div>
<div> test页面 </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没有require方法定义的使用,说白了就是不使用require方法进行资源的导入,而是使用新的方法。详情请看官网。
Vite官网
我这里提供两种方法:
方法1:
使用 import导入资源
<template>
<div>
<div> test页面 </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) 语法
<template>
<div>
<div> test页面 </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
PS:来人啊,把坑埋了!打道回府。