Vue在运行时加载带有javascript对象的JS文件

Question

我正在使用Vue构建无代码应用程序。 我知道我有一些JSON文件并在运行时导入它。 但是，JSON文件不允许添加功能。 我改为使用javascript或typescript文件来存储JSON对象，如下所示。

export {
  "is": "button",
  "props": {
    "type": "button"
  },
  "events": {
    "click": () => {
      // do something
    }
  }
}

目前，我想在Vue创建组件时触发导入。

{
  created () {
    // import here
  }
}

我有两种尝试的方法：

1. 添加一个脚本标签，但我需要先将其存储起来，比如窗口
2. 使用import但它只支持本地文件。

我将这些文件存储在后端，并在前端需要时加载它们。 有没有更好的解决方案？ 请帮助，谢谢。

Answer 1

听起来您基本上想做类似延迟模块加载的操作，如果您使用Webpack，则可能需要看看以下内容： https ://alexjover.com/blog/lazy-load-in-vue-using-webpack- S-代码分割/

我不确定我是否可以推荐您采用的方法，但是如果您确实要坚持使用该方法，则解决方案可能类似于：

1. 对您文件的URL发出HTTP get请求。 这应该是纯文本响应，而不是JSON。 该文件本身可以是一个.js文件，其中包含带有函数定义的对象文字（ { a: ..., b: ..., c: ... } ）。
2. 一旦获得文本，请使用eval(...the response)对其进行评估，并将其保存到本地变量中，然后可以使用。 请注意，如果文件中的代码具有任何依赖关系，则必须采用某种方式将这些代码放在一起。

显然，这很麻烦，可能不值得。 如果它是一个相当大的应用程序，一般来说代码分割是值得的。 对于较小的应用程序，往返的成本要大于加载初始捆绑软件的成本。

无论如何，使用Vue的动态导入系统可能比使用手动解决方案更有运气，但这实际上取决于您在此尝试实现的目标。