我必须为支付网关使用两个外部脚本。
现在两者都放在index.html文件中。
但是，我不想在开头本身就加载这些文件。
只有在用户打开特定组件(使用路由器视图)时才需要支付网关。
有办法实现这个目标吗?
谢谢。
当前回答
我发现一个快速简单的方法是这样的:
<template>
<div>Some HTML</div>
<component
src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"
:is="'script'"
></component>
</template>
其他回答
如果你试图利用一个在JavaScript文件中定义的变量，而这个文件是异步加载的，你收到一个'undefined'错误，这很可能是因为脚本还没有完成加载。要解决这个问题，可以利用onload函数确保脚本在尝试访问变量之前已经完成加载。举个例子:
const script = document.createElement(...) // set attribute and so on...
script.onload = () => {
// do something with some variables/functions/logic from the loaded script
}
使用webpack和vue加载器，你可以这样做
在创建组件之前，它会等待外部脚本加载，因此在组件中可以使用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)
})
}
},
我发现一个快速简单的方法是这样的:
<template>
<div>Some HTML</div>
<component
src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"
:is="'script'"
></component>
</template>
解决这个问题的一个简单而有效的方法是将外部脚本添加到组件的vue mounted()中。我将用谷歌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
为了保持组件的干净，你可以使用mixin。
在组件上导入外部mixin文件。
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",
}
}
]
}
