VUE动态加载js和css

创建一个DynamicTool.js文件

/**
 * 动态加载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 {*} src
 * @param {*} callback
 *   loadScript("",function(){
 *   console.log("加载成功")
 * })
 * var that = this; 在方法里面使用that
 */
export function loadJS(jsUrl, callback,isCache = false) {
  var script = document.createElement('script');
  var head = document.head;
  script.type = 'text/JavaScript';
  if (isCache) {
      script.src = jsUrl + "?t=" + new Date().getTime();
  }else {
    script.src = jsUrl
  }
  if (script.addEventListener) {
    script.addEventListener('load', callback, false);
  }
  head.appendChild(script);
}

AppSetting.js文件配置地址

 var AreaScriptUrl='http://locahost/api/Data.aspx';

index.html首页

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>SDK控制台</title>
  <script src=./static/AppSetting.js type=text/javascript></script>
</head>

<body>
  <div id="app"></div>
</body>
</html>

页面引用

import { loadJS } from "@/common/WMTools"

调用

 mounted(){
    var that = this;
    loadJS(AreaScriptUrl, function () {
      
    });
  },

猜你喜欢

转载自blog.csdn.net/m0_46641774/article/details/129686937