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 не является хорошим решением:
- Для вас важна производительность, и вы хотите максимально оптимизировать приложение. Загружать скрипт на каждой странице неэффективно, особенно если внешний ресурс используется только частью функционала.
Спасибо, что читаете этот блог.