举杯邀月

vue中引入外部脚本连接、样式连接的方法

摘要:在vue中,直接使用script标签引入外部脚本或者like引入外部连接,是不生效的。如果我们想引入外部脚本或者样式,该怎么做呢?

第一种

直接在 index.html 中以标签方式引入

第二种

自定义引入标签(组件)

 components:{
   'remote-css': {
        render(createElement) {            
          return createElement('link', { attrs: { rel: 'stylesheet', href: this.href }});
        },
        props: {
        href: { type: String, required: true },
        },
    },
    'remote-js': {
        render(createElement) {
          return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});            
        },
        props: {
        src: { type: String, required: true },
        },
    },
},
    
/** 使用 **/
< remote-css href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css">
< remote-js src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.bundle.js">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

作者:举杯邀月

出处: http://www.hug-code.cn/archives/5fdb2001372a3.html

2020-10-18 标签: vue