是否可以从 URL 中包含 Vue.js 组件？

Question

我们正在设计一个插件架构，并且很好奇是否有办法允许通过 URL 将 3rd 方插件作为 Vue 组件包含在内。

如何从远程 url 导入 vue 文件？例如，我正在尝试遵循 Alex Jover Morales 的方法来导入异步组件Async vue.js components。在这种方法中，当用户单击“导入插件”按钮时，应该会出现一个从 url 导入的 vue 组件。我在 github 页面上发布了我想导入的 vue 组件。

应用无法解析网址。为什么不？我必须做些什么来解决这个问题？ Import error

这是我正在导入的 vue 组件的代码...

  <div v-if="showPlugin">
    <MassEmailerPlugin>
    </MassEmailerPlugin>
    <button @click.prevent="addPlugin">Add Plugin</button>
  </div>
</template>

<style>
</style>

<script>
export default {
  name: "Plugins",
  components: {   
    MassEmailerPlugin: () => import('https://github.com/gideongrossmanHome/test-vuejs-plugin/blob/master/index.html')
  },

  data() {
    return {
      showPlugin: false
    }

  },

  methods: {
    addPlugin() {
      this.showPlugin = true;
      console.log("showing plugin");
    }
  }
};
</script>

这是我要导入的组件...

<template>
    <div>
        Plugin from url
    </div>
</template>

<script>
export default {
    name: "MassEmailerPlugin"
}
</script>

Answer 1

我同意前面的评论。我认为主要是您要导入的代码可能需要先编译为纯 JavaScript，然后才能导入（而且您还需要导入实际源代码，而不是 GitHub 页面）。

我会提出的另一个建议是简单地将您尝试导入的组件复制到项目中的某个位置（对于第三方的东西，可能像 /src/vendor/Component.vue），然后您可以像任何其他组件一样将它动态地导入到您的项目中。这种方法的好处是不需要您编译第三方组件，因为它将成为您源代码的一部分。

如果不能将代码复制到您的 repo 中，也许这个第三方插件可以通过npm install 获得？如果它在 NPM 上，你可以从那里安装它，如果它只是在 GitHub 上，你可能仍然可以安装它。那还是去动态导入吧。

希望对您有所帮助。

Answer 2

您当前的实现存在一些问题：

• 您拥有的动态import 声明指向GitHub.com 网页，而不是组件本身的代码。如果您只想要代码，则应单击页面右上角的“原始”按钮，该按钮将为您提供如下 URL：https://raw.githubusercontent.com/gideongrossmanHome/test-vuejs-plugin/master/index.html。
• 您的 Vue 组件应声明为 .vue 而不是 .html。
• 即便如此，您仍需要以某种方式从 .vue 文件中编译 Vue 组件并将其注册到 Vue 实例中以使其工作。

如果你真的想使用来自远程 URL 的组件，你可以做的是使用 webpack 将它们编译成 JS 代码，然后像在你的代码中那样动态地导入。但是，允许外部 JS 在您自己的站点上运行是极其危险的，并且可能会使您面临 XSS 攻击。

相反，如果您正在处理将在内部使用的东西，我建议您看看能够将您的插件导出为 npm 包。这样，您可以在需要时导入它（仍然适用于动态导入），并且可以很好地打包为一个工作和可重用的包。以下是有关如何执行此操作的基本指南，但您可能需要更多研究：https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html。