在vue中引入多个script标签

注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。1.可以在index.html中引入，在HTML文件中可以引入多个script标签。<head><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqsk...

IT 哈

14886人浏览 · 2020-04-21 09:27:26

IT 哈 · 2020-04-21 09:27:26 发布

注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。

1.可以在index.html中引入，在HTML文件中可以引入多个script标签。

<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqskoImqlosSrcQrsdpH"></script>
</head>

2.利用Vue的mounted生命周期

const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js';
document.body.appendChild(oScript);

3.利用Vue的createElement方法,通过引入到组件中

components: {
'scriptLink': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js',
},
},
)
}
}

4.第三种方封装一个remoteJs 组件

<template>
<remote-js src="//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js"></remote-js>
</template>
<script>
export default {
components: {
'remote-js': {
render(createElement) {
return createElement('script', {attrs: {type: 'text/javascript', src: this.src}});
},
props: {
src: { type: String, required: true}
}
}
}
}
</script>
转自https://blog.csdn.net/qq_38918953/article/details/100924389?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport