vue2 项目中index.html页面如何根据不同的环境引入不同的CDN文件

Question

如图所示，由vue-cli生成的项目，index.html页面 head部分使用 <script>标签引入第三方的js

需求是这样的，比如在普通浏览器访问需要引入高德地图，但是在微信中打开不需要引入高德地图... 还有些场景可能添加或移除第三方的js

求教各位大佬，如何实现这种需求

Answer 1

function isWechat() {
    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i)=="micromessenger")
        return true;
    else
        return false;
}

if( isWechat()){
    docment.write("<script src='a.js'></script>");
}else{
    docment.write("<script src='b.js'></script>");
}

Answer 2

(function() {
                var jssrc = ''
                if(ua.match(/MicroMessenger/i)=="micromessenger"){
                    jssrc='xxx/a.js'
                } else {
                    jssrc = 'xxx/b.js'
                }
                var myJs= document.createElement("script");
                myJs.src = jssrc;
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(myJs, s);
              })();

Answer 3

使用异步加载，但是要注意插入的形式，放在头部还是尾部，defer还是async 需要看你的需求，原则是不js 的加载和执行不阻塞dom的解析和渲染

Answer 4

对浏览器做判断

window.navigator.userAgent

针对浏览器做不同的逻辑

附判断微信浏览器的：

isWeiXin () {   
    var ua = window.navigator.userAgent.toLowerCase()      
    if (ua.match(/MicroMessenger/i)) {    
        if (ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
             return true    
         } else {
             return false    
         }   
    } else {    
        return false   
    } 
}