vue 动态引入第三方js和css

页面中经常会用到第三方库的情况，直接全局引入到html文件会造成资源浪费
实现在需要的页面动态加载

/**
 * 动态加载css文件
 * @param {*} url
 * @param {*} isCache
 */
export function loadCSS(url,isCache=false) {
  let element = document.createElement("link");
  element.setAttribute("rel", "stylesheet");
  element.setAttribute("type", "text/css");
  if (isCache) {
    element.setAttribute("href", url + "?t=" + new Date().getTime());
  } else {
    element.setAttribute("href", url);
  }
  document.head.appendChild(element);
}

/**
 * 动态加载js文件
 * @param {*} url
 * @param {*} isCache
 */
export function addJS (url,isCache = false) {
	return new Promise((resolve, reject) => {
		const script = document.createElement('script')
		script.src = url
		script.type = 'text/javascript'
		if (isCache) {
	     script.src = jsUrl + "?t=" + new Date().getTime();
		}else {
		  script.src = jsUrl
		}
		document.body.appendChild(script)
		script.onload = () => {
			resolve()
		}
	})
}

调用

import {addJS} from '@/utils'

init(){
	addJs("https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js");
}