Vue~vue3-sfc-loader用法

1.vue2-sfc-loader版本参考这个：(vue2&vue2-sfc-loader)

https://article.juejin.cn/post/7236954612988297274

2.vue3-sfc-loader版本的基础写法：（vue3&vue3-sfc-loader）

<template>
  <div>   
    <component :is="data.remote" v-if="data.remote" v-bind="$attrs" />  
  </div>
</template>

<script setup name="HerView" lang="ts">
import { reactive, onMounted } from "vue";
import axios from "axios";
import * as Vue from "vue";//重要
import { loadModule } from "vue3-sfc-loader/dist/vue3-sfc-loader.js";//重要

let data = reactive({
  remote: null,
  temp: "",
  options: {
    moduleCache: {
      vue: Vue,
    },
    // 获取文件
    async getFile(url: any) {
      const res = await fetch(url).then((response) => response.text());
      return Promise.resolve(res);
    },
    // 添加样式
    addStyle(textContent: any) {
      const style = Object.assign(document.createElement("style"), {
        textContent,
      });
      const ref = document.head.getElementsByTagName("style")[0] || null;
      document.head.insertBefore(style, ref);
    },
  },
});

let load = async (url: any) => {
  const com = await loadModule(url, data.options);
  data.remote = com;
};
onMounted(async () => {
  load("fd/vue/1.vue");//fd路径已代理
});
</script>