安装依赖

yarn add vue3-sfc-loader

调用示例

<script setup lang="ts">
import { loadModule } from "vue3-sfc-loader"
import * as Vue from "vue"
import * as ElementPlus from "element-plus"
import { onMounted ,ref } from "vue"
const containerRef = ref(null)
onMounted(() => {
	if(containerRef.value) { 
    const options = {
	  //如果目标sfc内有import则通过此对象传输
      moduleCache: { vue: Vue ,"element-plus":ElementPlus },	 
	  //用于获取sfc内容的，可以通过url自己写fetch请求，也可以直接返回字符串。
      //url为loadModule的第一个参数，需要.vue结尾。
	  //如果是方法内直接写返回字符串的，</script>需要转义成<\/script>
      getFile: (url:string) => {
        return `<script lang="ts" setup>
import { ref } from "vue"
import { ElMessageBox } from 'element-plus'
const a = ref(1)
const clickHandle = ()=>{
  ElMessageBox.alert("hello")
}
<\/script>
<template>
  <div>
  <el-button @click="clickHandle">按钮</el-button>
    123 {{ a }} 123
  </div>
</template>`
      },
      addStyle: () => {return}
    }
		//一定要.vue结尾
   		const app = Vue.createApp(Vue.defineAsyncComponent(() => loadModule("demo.vue", options)))
    	app.use(ElementPlus)
    	app.mount(containerRef.value)
	}
})
<script>
<template>
	<div ref="containerRef" />
</template>