Vue3 +Vite使用require报错

<script setup>
import { ref } from "vue";
const bgImg = ref("");
bgImg.value = require("@/assets/28fc29c767c3dc8c75fbe6b284b5de1e.jpeg");
</script>

原本我们在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导入资源

<script setup>
import { ref } from "vue";
import source from "@/assets/28fc29c767c3dc8c75fbe6b284b5de1e.jpeg";
const bgImg = ref("");
bgImg.value = source;
</script>

方法2：new URL

直接使用 new URL(url, import.meta.url) 语法

<script setup>
import { ref } from "vue";
const bgImg = ref("");
bgImg.value = new URL(
  "@/assets/28fc29c767c3dc8c75fbe6b284b5de1e.jpeg",
  import.meta.url
).href;
</script>