ltinyho's Blog
0%

vue 组件动态引入 js、css

Posted on Edited on In

有一些文件只在部分页面用到，其他页面用不到，但是不想全局引入，所以需要在组件中动态引入。

在vue组件动态引入js、css文件

下面是引入百度的 umeditor 富文本编辑器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function insertJs(src) {
    return new Promise((resolve, reject) => {
      const tag = document.createElement('script');
      tag.type = 'text/javascript';
      tag.src = src;
      const s = document.getElementsByTagName('head')[0];
      s.appendChild(tag);
      tag.addEventListener('load', resolve);
    });
  }

  function insertCss(src) {
    return new Promise((resolve, reject) => {
      const tag = document.createElement('link');
      tag.href = src;
      tag.type = 'text/css';
      tag.rel = 'stylesheet';
      const s = document.getElementsByTagName('head')[0];
      s.appendChild(tag);
      tag.addEventListener('load', resolve);
    });
  }
  const UMEDITOR_HOME_URL = '';
    window.UMEDITOR_HOME_URL = UMEDITOR_HOME_URL;
    insertCss(`${UMEDITOR_HOME_URL}themes/default/css/umeditor.css`);
    insertJs('http://www.kaoyaya.com/source/js/jquery/jquery-1.10.2.min.js');
    insertJs(`${UMEDITOR_HOME_URL}umeditor.min.js`);
    insertJs(`${UMEDITOR_HOME_URL}umeditor.config.js`).then(() => {
      insertJs(`${UMEDITOR_HOME_URL}lang/zh-cn/zh-cn.js`);
    });

在文件入口插入js