30 июля 2022 г. Первоначально опубликовано на techvblogs.com・3 минуты чтения

В некоторых случаях вы можете захотеть включить дополнительный сценарий JavaScript в свое приложение Vue. Для этого может быть любая причина — вы хотите применить дизайн материала для определенного компонента, хотите иметь пользовательский интерфейс Kendo или что-то еще. Действительно ли вам нужно внедрить внешний скрипт в компонент Vue, мы обсудим позже, а сегодня мы здесь по одной причине — чтобы узнать, как загрузить внешний скрипт в Vue.js.

Существует два подхода для внедрения скриптов JavaScript:

  • Вы загружаете его из внешнего источника — CDN или из отдельного файла.
  • Вы вставляете скрипт внутрь HTML-элемента.

Однако иногда некоторые скрипты имеют большой размер, и если вам нужно запустить только на определенной странице, рекомендуется добавить его локально.

Итак, если нам нужно запустить скрипт локально на странице, мы должны добавить файл в этот конкретный компонент. И у Vue нет специального способа добавления скриптов локально на определенную страницу/компонент.

Итак, вот некоторые из способов, которые я нашел в поиске проблемы для себя.

Надеюсь, это поможет вам решить и вашу проблему.

В этой статье мы рассмотрим, как добавить внешние скрипты JavaScript в компоненты Vue.js.

Как добавить внешние скрипты JavaScript в компоненты Vue.js?

Чтобы добавить внешние скрипты JavaScript в компоненты Vue.js, мы можем добавить элемент скрипта с document.createElement.

Например, мы пишем

export default {
  //...
  mounted() {
    const recaptchaScript = document.createElement("script");
    recaptchaScript.setAttribute(
      "src",
      "https://www.google.com/recaptcha/api.js"
    );
    document.head.appendChild(recaptchaScript);
  },
  //...
};

Добавьте тег скрипта в шаблон компонента Vue.

Это простое решение, которое я нашел. Просто добавьте скрипт в шаблон компонента. Но не забудьте добавить type="application/javascript" в тег script, иначе во время сборки будет отображаться ошибка.

<script type="application/javascript" src="https://cdn.jsdelivr.net/vue.js"></script>

Однако, если вы добавили document.write() в свой тег скрипта, этот метод не будет работать. И вы получите сообщение об ошибке «Не удалось выполнить «запись» в «Документе»: запись в документ из асинхронно загруженного внешнего сценария невозможна, если только он не открыт явным образом».

Использование модуля Vue-Meta

Vue-meta — это модуль vue, который вы можете установить в свое приложение, чтобы добавить метаданные и скрипт в компонент Vue. Это упрощает добавление любых тегов сценария в тег заголовка в отдельных компонентах Vue.

Пример синтаксиса:

export default {
  {
    metaInfo: {
      script: [
        { src: 'https://cdn.jsdelivr.net/vue.js', async: true, defer: true }
      ],
    }
  }
}

Использование модуля vue-head

vue-head также является модулем, как и vue-meta, добавив его в свое приложение Vue, вы сможете установить метаданные в своем теге заголовка на отдельных страницах.

Подробнее об этом читайте: Документация vue-head

Пример кода:

export default { 
  head: {
      script: [
        { type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body
        // with shorthand
        { t: 'application/ld+json', i: '{ "@context": "http://schema.org" }' },
        // ...
      ],
    }
}

Вот некоторые из способов, которые помогут вам локально добавить внешний JS-скрипт в компонент Vue.

Когда вы должны предпочесть иметь сценарий глобально, а не иметь его в компоненте

И, наконец, при глобальной загрузке внешнего скрипта в компоненте Vue не является хорошим решением:

  • Для вас важна производительность, и вы хотите максимально оптимизировать приложение. Загружать скрипт на каждой странице неэффективно, особенно если внешний ресурс используется только частью функционала.

Спасибо, что читаете этот блог.