如何在运行时将包含导入语句与Vue API的可组合函数API字符串响应转换为可用的Vue可组合？

我明白你遇到的核心问题了——从API拿到的可组合代码里包含Vue响应式API（ref、computed）和裸模块导入语句，直接用Blob、eval或者new Function根本跑不起来。要么浏览器解析不了import ... from 'vue'这种裸模块，要么响应式API没法绑定正确的执行上下文。我之前处理过类似的动态代码执行场景，给你几个轻量且可行的方案，完全不用给FormBuilder加额外依赖：

问题根源拆解 #

你之前尝试的方法失效主要有两个核心原因：

• 浏览器的动态模块导入（Blob URL方式）无法解析import ... from 'vue'这类裸模块导入——浏览器不知道vue模块的实际路径，Blob是临时文件，没有模块解析的上下文支撑。
• eval或new Function会把代码放在全局/孤立函数作用域执行，没法正确绑定Vue模块的响应式API，导致ref、computed这些函数无法生成有效的响应式数据。

可行解决方案（安全优先） #

⚠️ 重要前提：你必须100%信任这个API的数据源。运行远程获取的动态代码存在极高的XSS和恶意代码执行风险，绝对不能用于加载不可信来源的代码。

方案一：依赖注入式代码改造（最通用） #

核心思路是：把远程代码里的import语句移除，改成通过参数接收Vue的响应式API（以及其他依赖），让主应用把这些依赖注入到远程代码的执行上下文中，绕开浏览器的模块解析限制。

具体步骤和代码示例：

<script setup lang="ts">
import FormBuilder from 'FormBuilder'
import { ref, computed } from 'vue'

// 模拟API返回的代码字符串
const apiResp = `
import { ref, computed } from 'vue'
export const useFunc = (model) => {
  // ... 这里是你API返回的完整useFunc代码
}`

// 处理API代码：移除Vue导入，包裹成接收依赖的函数
const processRemoteCode = (rawCode: string) => {
  // 移除Vue的import语句（正则可根据实际代码调整匹配规则）
  const codeWithoutImports = rawCode.replace(
    /import\s*{[^}]+}\s*from\s*['"]vue['"];/g,
    ''
  )
  // 把代码包裹成接收Vue API的函数，最终返回useFunc
  return `
    export default function injectDependencies(VueAPI) {
      // 把Vue API注入到当前作用域
      const { ref, computed } = VueAPI;
      ${codeWithoutImports}
      return useFunc;
    }
  `
}

// 生成安全可执行的代码
const executableCode = processRemoteCode(apiResp)

// 创建Blob并动态导入
const blob = new Blob([executableCode], { type: 'application/javascript' })
const moduleUrl = URL.createObjectURL(blob)
const remoteModule = await import(moduleUrl)

// 注入主应用的Vue API，拿到可用的useFunc
const useFunc = remoteModule.default({ ref, computed })

// 用完Blob URL后记得释放资源
URL.revokeObjectURL(moduleUrl)
</script>

<template>
  <FormBuilder :logic="useFunc"></FormBuilder>
</template>

方案二：Vite项目专属（利用构建工具能力） #

如果你是用Vite开发的项目，可以借助Vite的transform钩子或者import.meta.resolve来动态处理远程代码的模块解析。你可以写一个简单的Vite插件，在运行时把远程代码里的裸模块导入转换为项目内的模块路径，但这个方案需要修改Vite配置，适合有构建工具支持的场景。

不过对于大多数纯运行时动态获取代码的场景，方案一已经足够灵活，而且不需要修改项目的构建配置。

额外注意事项 #

• 如果API返回的代码里还有其他依赖（比如状态管理工具、自定义工具函数），只需要在injectDependencies函数里添加对应参数，然后把主应用里的依赖传进去即可。
• 动态生成Blob URL后，记得调用URL.revokeObjectURL(moduleUrl)释放资源，避免内存泄漏。

内容来源于stack exchange