Question

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

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

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

{
  created () {
    // import here
  }
}

我尝试了两种方法：

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

Answer 1

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

我不确定我是否可以推荐您采用的方法，但是如果您确实要坚持使用它，则解决方案可能看起来像这样：

向文件的网址发出HTTP get请求。这应该是纯文本响应，而不是JSON。该文件本身可以是一个.js文件，其中包含带有函数定义的对象文字（{ a: ..., b: ..., c: ... }）。
获取文本后，请用eval(...the response)对其进行评估，然后将其保存到本地变量中，然后可以使用。请注意，如果文件中的代码具有任何依赖关系，则还必须想出一些方法来将其引入。

显然，这很麻烦，可能不值得。通常，只有在它是一个相当大的应用程序时，代码拆分才值得付出努力。对于较小的应用程序，往返的成本要大于加载初始捆绑软件的成本。

在任何情况下，使用Vue的内置动态导入系统都比手动解决方案要幸运得多，但这实际上取决于您要在此处实现的目标。