Я должен использовать два внешних скрипта для платежных шлюзов. Сейчас оба они помещаются в файл index.html. Однако я не хочу загружать эти файлы в самом начале. Платежный шлюз необходим только в том случае, когда пользователь открывает конкретный компонент (используя вид маршрутизатора). В любом случае, чтобы достичь этого?
Как добавить внешние скрипты JS к компонентам VueJS
Ответ 1
Простой и эффективный способ решить эту проблему - добавить внешний скрипт в vue mount 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
Ответ 2
с помощью webpack и vue загрузчика вы можете сделать что-то вроде этого
он ожидает, что внешний script загрузится до создания компонента, так что globar vars и т.д. доступны в компоненте
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)
})
}
},
Ответ 3
Я скачал некоторый шаблон 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")
Ответ 4
Используете ли вы один из шаблонов стартера 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
Ответ 5
Вы можете загрузить нужный скрипт с помощью решения на основе обещаний:
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
Root немного хакерский, и вы должны использовать вместо него решение vuex или eventHub для глобальных событий.
Вы должны превратить вышеперечисленное в компонент и использовать его там, где это необходимо, он будет загружать скрипт только при использовании.
Ответ 6
Вы можете использовать пакет 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 },
// ...
]
}
})
Проверьте эту ссылку для большего количества примеров.
Ответ 7
Вы можете использовать vue-loader и закодировать свои компоненты в своих файлах (отдельные файловые компоненты). Это позволит вам включать скрипты и css на основе компонентов.
Ответ 8
Лучший ответ для тега create в смонтированном файле хорош, но у него есть некоторые проблемы:
Он будет повторяться снова и снова, если вы меняете ссылку несколько раз.
Поэтому я создал скрипт для решения этой проблемы, и вы можете удалить тег, если хотите.
Это очень просто, но может сэкономить ваше время, чтобы создать его самостоятельно.
// 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>
......
Ответ 9
Для поддержания чистоты компонентов вы можете использовать миксин.
В ваш компонент импортируйте внешний миксин файл.
Profile.vue
import externalJs from '@client/mixins/externalJs';
export default{
mounted(){
this.externalJsFiles();
}
}
externalJs.js
import('@JSassets/js/file-upload.js').then(mod => {
// your JS elements
})
babelrc (я включаю это, если что-то застрянет при импорте)
{
"presets":["@babel/preset-env"],
"plugins":[
[
"module-resolver", {
"root": ["./"],
alias : {
"@client": "./client",
"@JSassets": "./server/public",
}
}
]
}