Я использую два внешних скрипта для платежных шлюзов. Сейчас оба помещены в index.html
файл. Однако я не хочу загружать эти файлы в самом начале. Платежный шлюз нужен только тогда, когда пользователь открывает определенный компонент ( using router-view
).
Есть ли способ добиться этого?
javascript
vue.js
vuejs2
vue-component
vue-router
Гихо Варгезе
источник
источник
/public/index.html
это сделать?Ответы:
Простой и эффективный способ решить эту проблему - добавить внешний скрипт в vue
mounted()
вашего компонента. Я проиллюстрирую вас скриптом Google Recaptcha :<template> .... your HTML </template> <script> export default { data: () => ({ ......data of your component }), mounted() { let recaptchaScript = document.createElement('script') recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js') document.head.appendChild(recaptchaScript) }, methods: { ......methods of your component } } </script>
Источник: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
источник
created()
метод не может получить документ, используйтеmounted()
вместо негоrecaptchaScript.async = true
перед тем, как присоединить его к голове.recaptchaScript.defer = true
может также кому подойдетЯ загрузил HTML-шаблон, который поставляется с пользовательскими файлами js и jquery. Мне пришлось прикрепить эти js к моему приложению. и продолжаем с Vue.
Нашел этот плагин, это чистый способ добавить внешние скрипты как через CDN, так и из статических файлов https://www.npmjs.com/package/vue-plugin-load-script
// local files // you have to put your scripts into the public folder. // that way webpack simply copy these files as it is. Vue.loadScript("/js/jquery-2.2.4.min.js") // cdn Vue.loadScript("https://maps.googleapis.com/maps/api/js")
источник
используя webpack и загрузчик vue, вы можете сделать что-то вроде этого
он ожидает загрузки внешнего скрипта перед созданием компонента, поэтому в компоненте доступны глобальные переменные и т. д.
components: { SomeComponent: () => { return new Promise((resolve, reject) => { let script = document.createElement('script') script.onload = () => { resolve(import(someComponent)) } script.async = true script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places' document.head.appendChild(script) }) } },
источник
Если вы пытаетесь встроить внешние js-скрипты в шаблон компонента vue.js, выполните следующие действия:
<template> <div> This is my component <script src="https://badge.dimensions.ai/badge.js"></script> </div> <template>
И Vue показал мне эту ошибку:
Шаблоны должны отвечать только за отображение состояния в пользовательский интерфейс. Избегайте размещения в шаблонах тегов с побочными эффектами, например, поскольку они не будут анализироваться.
<script type="application/javascript" defer src="..."></script>
Вы можете заметить
defer
атрибут. Если вы хотите узнать больше, посмотрите это видео Кайла.источник
Вы используете один из начальных шаблонов Webpack для vue ( https://github.com/vuejs-templates/webpack )? Он уже настроен с помощью vue-loader ( https://github.com/vuejs/vue-loader ). Если вы не используете стартовый шаблон, вам необходимо настроить webpack и vue-loader.
Затем вы можете
import
создавать сценарии для соответствующих (отдельных файлов) компонентов. Перед этим вы должны передатьexport
из своих скриптов то, что вы хотите,import
своим компонентам.Импорт ES6:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html
~ Изменить ~
Вы можете импортировать из этих оболочек:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
источник
Это можно просто сделать вот так.
created() { var scripts = [ "https://cloudfront.net/js/jquery-3.4.1.min.js", "js/local.js" ]; scripts.forEach(script => { let tag = document.createElement("script"); tag.setAttribute("src", script); document.head.appendChild(tag); }); }
источник
Вы можете загрузить нужный сценарий с помощью решения на основе обещаний:
export default { data () { return { is_script_loading: false } }, created () { // If another component is already loading the script this.$root.$on('loading_script', e => { this.is_script_loading = true }) }, methods: { load_script () { let self = this return new Promise((resolve, reject) => { // if script is already loading via another component if ( self.is_script_loading ){ // Resolve when the other component has loaded the script this.$root.$on('script_loaded', resolve) return } let script = document.createElement('script') script.setAttribute('src', 'https://www.google.com/recaptcha/api.js') script.async = true this.$root.$emit('loading_script') script.onload = () => { /* emit to global event bus to inform other components * we are already loading the script */ this.$root.$emit('script_loaded') resolve() } document.head.appendChild(script) }) }, async use_script () { try { await this.load_script() // .. do what you want after script has loaded } catch (err) { console.log(err) } } } }
Обратите внимание, что
this.$root
это немного взломано, и вместо этого вы должны использовать решение vuex или eventHub для глобальных событий.Вы превратите вышеуказанное в компонент и будете использовать его везде, где это необходимо, он будет загружать скрипт только при использовании.
источник
Вы можете использовать пакет vue-head для добавления скриптов и других тегов в заголовок вашего компонента vue.
Это так просто, как:
var myComponent = Vue.extend({ data: function () { return { ... } }, head: { title: { inner: 'It will be a pleasure' }, // Meta tags meta: [ { name: 'application-name', content: 'Name of my application' }, { name: 'description', content: 'A description of the page', id: 'desc' }, // id to replace intead of create element // ... // Twitter { name: 'twitter:title', content: 'Content Title' }, // with shorthand { n: 'twitter:description', c: 'Content description less than 200 characters'}, // ... // Google+ / Schema.org { itemprop: 'name', content: 'Content Title' }, { itemprop: 'description', content: 'Content Title' }, // ... // Facebook / Open Graph { property: 'fb:app_id', content: '123456789' }, { property: 'og:title', content: 'Content Title' }, // with shorthand { p: 'og:image', c: 'https://example.com/image.jpg' }, // ... ], // link tags link: [ { rel: 'canonical', href: 'http://example.com/#!/contact/', id: 'canonical' }, { rel: 'author', href: 'author', undo: false }, // undo property - not to remove the element { rel: 'icon', href: require('./path/to/icon-16.png'), sizes: '16x16', type: 'image/png' }, // with shorthand { r: 'icon', h: 'path/to/icon-32.png', sz: '32x32', t: 'image/png' }, // ... ], 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" }' }, // ... ], style: [ { type: 'text/css', inner: 'body { background-color: #000; color: #fff}', undo: false }, // ... ] } })
По этой ссылке вы найдете больше примеров.
источник
Верхний ответ - создать тег в смонтированном состоянии - это хорошо, но с ним есть некоторые проблемы: если вы измените ссылку несколько раз, она будет повторять создание тега снова и снова.
Поэтому я создал сценарий для решения этой проблемы, и вы можете удалить тег, если хотите.
Это очень просто, но вы можете сэкономить время, создавая его самостоятельно.
// PROJECT/src/assets/external.js function head_script(src) { if(document.querySelector("script[src='" + src + "']")){ return; } let script = document.createElement('script'); script.setAttribute('src', src); script.setAttribute('type', 'text/javascript'); document.head.appendChild(script) } function body_script(src) { if(document.querySelector("script[src='" + src + "']")){ return; } let script = document.createElement('script'); script.setAttribute('src', src); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script) } function del_script(src) { let el = document.querySelector("script[src='" + src + "']"); if(el){ el.remove(); } } function head_link(href) { if(document.querySelector("link[href='" + href + "']")){ return; } let link = document.createElement('link'); link.setAttribute('href', href); link.setAttribute('rel', "stylesheet"); link.setAttribute('type', "text/css"); document.head.appendChild(link) } function body_link(href) { if(document.querySelector("link[href='" + href + "']")){ return; } let link = document.createElement('link'); link.setAttribute('href', href); link.setAttribute('rel', "stylesheet"); link.setAttribute('type', "text/css"); document.body.appendChild(link) } function del_link(href) { let el = document.querySelector("link[href='" + href + "']"); if(el){ el.remove(); } } export { head_script, body_script, del_script, head_link, body_link, del_link, }
И вы можете использовать это так:
// PROJECT/src/views/xxxxxxxxx.vue ...... <script> import * as external from '@/assets/external.js' export default { name: "xxxxxxxxx", mounted(){ external.head_script('/assets/script1.js'); external.body_script('/assets/script2.js'); external.head_link('/assets/style1.css'); external.body_link('/assets/style2.css'); }, destroyed(){ external.del_script('/assets/script1.js'); external.del_script('/assets/script2.js'); external.del_link('/assets/style1.css'); external.del_link('/assets/style2.css'); }, } </script> ......
источник
Чтобы компоненты оставались чистыми, можно использовать миксины.
На вашем компоненте импортируйте внешний файл миксина.
import externalJs from '@client/mixins/externalJs'; export default{ mounted(){ this.externalJsFiles(); } }
import('@JSassets/js/file-upload.js').then(mod => { // your JS elements })
{ "presets":["@babel/preset-env"], "plugins":[ [ "module-resolver", { "root": ["./"], alias : { "@client": "./client", "@JSassets": "./server/public", } } ] }
источник
Вы можете использовать vue-loader и кодировать свои компоненты в их собственных файлах (компоненты с одним файлом). Это позволит вам включать скрипты и CSS на компонентной основе.
источник
Самое простое решение - добавить скрипт в
index.html
файл вашего vue-проекта.index.html:
источник
Для этого варианта использования есть компонент vue
https://github.com/TheDynomike/vue-script-component#usage
<template> <div> <VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/> <div> </template> <script> import VueScriptComponent from 'vue-script-component' export default { ... components: { ... VueScriptComponent } ... } </script>
источник