vue3不能用require，换一种方式

在Vue3中，如果你不能使用`require()`函数，可能是由于项目配置了ES6模块化（import/export），或者你想避免在运行时动态加载。在这种情况下，你可以改用`import`来导入静态资源，例如CSS、图片或模板文件。对于`public`文件夹内的资源，虽然它们不会被打包到`dist`目录中，但在浏览器中可以直接通过URL访问。

例如，如果你有一个`template.html`文件在`/public/template`目录下，你可以这样做：

// 在需要使用该模板的地方
fetch('/public/template/template.html')
  .then(response => response.text())
  .then(html => { /* 在这里处理获取的HTML内容 */ });

或者，如果你要在组件内部引用，可以利用Webpack的配置，让这些文件被视为静态资源：

<template>
  <div v-if="loading">
    <!-- 使用 <script setup> -->
    <script setup>
      import template from "~/assets/template/template.html";
      const loading = ref(true); // 创建一个ref用于控制是否加载完成
      onMounted(async () => {
        await fetch('/public/template/template.html').then(res => res.text());
        loading.value = false; // 加载完成后设置为false
      });
    </script>
  </div>
</template>

在这个例子中，`template.html`会被预加载并在首次渲染时可用。