我必须为支付网关使用两个外部脚本。
现在两者都放在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>
其他回答
更新:这不再工作在Vue 3。你会收到这样的错误:
VueCompilerError:在客户端组件模板中忽略带有副作用(和)的标签。
如果你试图将外部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="…"" > < > /脚本
您可能会注意到defer属性。如果你想了解更多，请观看Kyle的视频
我下载了一些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")
这个用例有一个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>
您可以使用vue-loader并在它们自己的文件中编写组件(单文件组件)。这将允许您在组件的基础上包含脚本和css。
我发现一个快速简单的方法是这样的:
<template>
<div>Some HTML</div>
<component
src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"
:is="'script'"
></component>
</template>
