ReferenceError: require is not defined 【vue3 +vite +setup语法使用报错】

说明

原本我们在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：来人啊，把坑埋了！打道回府。