Question

我们正在设计一个插件体系结构，对于是否有一种方法可以允许通过URL将第三方插件作为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

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

您拥有的动态import语句位于GitHub.com网页上，而不是组件本身的代码。如果只需要代码，则应单击页面右上方的“原始”按钮，该按钮将为您提供如下网址：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。

Answer 2

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

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

如果无法将代码复制到您的仓库中，也许可以通过npm install使用此第三方插件？如果它在NPM上，则可以从那里安装，如果仅在GitHub上，则仍然可以安装。然后仍然要进行动态导入。

希望有帮助。

是否可以通过URL包含Vue.js组件？

2 个答案: