我必须为支付网关使用两个外部脚本。
现在两者都放在index.html文件中。
但是，我不想在一开始就加载这些文件。
仅当用户打开特定组件 ( using router-view)时才需要支付网关。
有没有办法实现这一目标？
谢谢。
如何将外部 JS 脚本添加到 VueJS 组件？
IT技术
javascript
vue.js
vuejs2
vue-component
vue-router
2021-01-22 12:58:22
6个回答
解决这个问题的一个简单有效的方法是将外部脚本添加到mounted()组件的 vue中。我将用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
我已经下载了一些带有自定义 js 文件和 jquery 的 HTML 模板。我不得不将这些 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 loader 你可以做这样的事情
它在创建组件之前等待外部脚本加载，因此组件中可以使用全局变量等
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 组件模板中，请执行以下操作：
我想向我的组件添加一个外部 javascript 嵌入代码，如下所示：
<template>
<div>
This is my component
<script src="https://badge.dimensions.ai/badge.js"></script>
</div>
<template>
Vue 向我展示了这个错误：
模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如 ，因为它们不会被解析。
我解决它的方法是添加
type="application/javascript"（请参阅此问题以了解有关 js 的 MIME 类型的更多信息）：
<script type="application/javascript" defer src="..."></script>
您可能会注意到该defer属性。如果您想了解更多信息，请观看Kyle 的此视频
这可以像这样简单地完成。
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);
});
}