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

我们正在设计一个插件体系结构，很想知道是否有办法允许通过URL将第三方插件作为Vue组件

如何从远程url导入vue文件？例如，我尝试按照Alex Jover Morales的方法导入异步组件。在这种方法中，当用户单击“导入插件”按钮时，将显示从url导入的vue组件。我在github页面上发布了要导入的vue组件

应用程序无法解析url。为什么不呢？我必须怎么做才能解决这个问题？

这是正在导入的我的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>

添加插件
导出默认值{
名称：“插件”，
组件：{
MasseEmailerPlugin:（）=>导入（'https://github.com/gideongrossmanHome/test-vuejs-plugin/blob/master/index.html')
},
数据（）{
返回{
showPlugin:false
}
},
方法：{
addPlugin（）{
this.showPlugin=true；
log（“显示插件”）；
}
}
};

这是我正在尝试导入的组件

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

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

来自url的插件
导出默认值{
名称：“MasseEmailerPlugin”
}

当前实施中存在一些问题：

• 您拥有的动态

  import

  语句是指向GitHub.com网页的，而不是组件本身的代码。如果您只需要代码，应该单击页面右上角的“原始”按钮，该按钮将为您提供如下URL:
• 您的Vue组件应该声明为

  .Vue

  ，而不是

  .html

• 即使这样，您也需要从

  .Vue

  文件中编译Vue组件，并将其注册到Vue实例中，以使其正常工作

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

---

相反，如果你正在做一些内部使用的东西，我建议你考虑一下将你的插件导出为npm包。这样，您就可以在需要时导入它（仍然可以使用动态导入），并且可以很好地打包为一个可工作且可重用的包。以下是关于如何做到这一点的基本指南，但您可能需要更多的研究：。

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

• 您拥有的动态

  import

  语句是指向GitHub.com网页的，而不是组件本身的代码。如果您只需要代码，应该单击页面右上角的“原始”按钮，该按钮将为您提供如下URL:
• 您的Vue组件应该声明为

  .Vue

  ，而不是

  .html

• 即使这样，您也需要从

  .Vue

  文件中编译Vue组件，并将其注册到Vue实例中，以使其正常工作

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

---

相反，如果你正在做一些内部使用的东西，我建议你考虑一下将你的插件导出为npm包。这样，您就可以在需要时导入它（仍然可以使用动态导入），并且可以很好地打包为一个可工作且可重用的包。以下是如何做到这一点的基本指南，但您可能需要更多的研究：。

我同意前面的评论。我认为最重要的是，在导入代码之前，您可能需要将其编译为纯ol'JavaScript（并且您还需要导入实际的源代码，而不是GitHub页面）

我的另一个建议是，只需将您试图导入到项目中的组件复制到某个地方（可能类似于第三方的

/src/vendor/component.vue

），然后您就可以像任何其他组件一样将其动态导入到您的项目中。这种方法的好处是不需要编译第三方组件，因为它将成为源代码的一部分

如果不选择将代码复制到您的repo中，那么这个第三方插件可能可以通过

npm install

？如果它在NPM上，您可以从那里安装它，如果它只是在GitHub上，您可能仍然可以安装它。然后仍然使用动态导入

---

希望这能有所帮助。

我同意前面的评论。我认为最重要的是，在导入代码之前，您可能需要将其编译为纯ol'JavaScript（并且您还需要导入实际的源代码，而不是GitHub页面）

我的另一个建议是，只需将您试图导入到项目中的组件复制到某个地方（可能类似于第三方的

/src/vendor/component.vue

），然后您就可以像任何其他组件一样将其动态导入到您的项目中。这种方法的好处是不需要编译第三方组件，因为它将成为源代码的一部分

如果不选择将代码复制到您的repo中，那么这个第三方插件可能可以通过

npm install

？如果它在NPM上，您可以从那里安装它，如果它只是在GitHub上，您可能仍然可以安装它。然后仍然使用动态导入

---

希望有帮助。

@[Justin Ho Tuan Duong]您建议“使用webpack将它们[Vue组件]编译为JS代码”。最简单的方法是什么？我是否应该在vue CLI中创建项目并进行构建？如果是，dist文件夹中名为“app.996c696.js”的.js文件是否是要导入的正确文件