Можно ли включить компонент Vue.js из URL?

Question

Мы разрабатываем архитектуру плагинов и нам интересно, есть ли способ разрешить включение сторонних плагинов в качестве компонентов Vue через URL.

Как я могу импортировать файл VUE из удаленного URL?Например, я пытаюсь следовать подходу Алекса Джовера Моралеса к импорту асинхронного компонента Async vue.js компоненты .При таком подходе, когда пользователь нажимает кнопку «импортировать плагин», должен появиться компонент vue, импортированный из URL.Я опубликовал компонент vue, который я хотел бы импортировать, на страницу github.

Приложение не может разрешить 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>

Вот компонент, который я пытаюсь импортировать...

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

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

Answer 1

Я согласен с предыдущим комментарием. Я думаю, что главное, что импортируемый код, возможно, должен быть скомпилирован в обычный старый JavaScript, прежде чем вы сможете его импортировать (и вам также нужно импортировать фактический источник, а не страницу GitHub).

Еще одна рекомендация, которую я хотел бы сделать, - просто скопировать компонент, который вы пытаетесь импортировать, в свой проект (например, /src/vendor/Component.vue для сторонних разработчиков), а затем вы можете динамически импортировать его в свой проект, как и любой другой компонент. Преимущество этого подхода заключается в том, что вам не нужно компилировать сторонний компонент, поскольку он станет частью вашего исходного кода.

А если копирование кода в ваш репо не вариант, возможно, этот сторонний плагин доступен через npm install? Если он на NPM, вы можете установить его оттуда, и если он только на GitHub, вы все равно сможете его установить. Тогда все равно продолжайте динамический импорт.

Надеюсь, это поможет.

Answer 2

Есть несколько проблем с вашей текущей реализацией:

• Динамический оператор import, который вы имеете, относится к веб-странице GitHub.com, а не к коду самого компонента.Если вы просто хотите получить код, нажмите кнопку «Raw» в правом верхнем углу страницы, которая выдаст вам URL-адрес, подобный следующему: https://raw.githubusercontent.com/gideongrossmanHome/test-vuejs-plugin/master/index.html.
• Ваш компонент Vue должен быть объявлен как .vue а не .html.
• Даже тогда вам нужно каким-то образом скомпилировать компонент Vue из файла .vue и зарегистрировать его в экземпляре Vue, чтобы он работал.

Что вы можете сделать, если вы ДЕЙСТВИТЕЛЬНО хотите использовать компоненты из удаленных URL-адресов, это скомпилировать их в код JS с помощью веб-пакета и импортировать их динамически, как в вашем коде.Однако разрешить запуск внешнего JS на вашем собственном сайте чрезвычайно опасно и может привести к атакам XSS.

Вместо этого, если вы работаете над чем-то, что будет использоваться внутри компании, я предлагаю вам взглянуть навозможность экспортировать ваш плагин в виде пакета npm.Таким образом, вы можете просто импортировать его, если это необходимо (все еще работает с динамическим импортом), и красиво упакован как рабочий и повторно используемый пакет.Вот основное руководство о том, как это сделать, но вам может потребоваться больше исследований: https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html.