当vue3不再支持IE

最新推荐文章于 2025-03-24 14:51:34 发布

小胖仔yo

最新推荐文章于 2025-03-24 14:51:34 发布

阅读量3.9k

点赞数 2

分类专栏：随笔文章标签：内核 vue ie

本文链接：https://blog.youkuaiyun.com/qq_42204414/article/details/116455078

版权

随笔专栏收录该内容

19 篇文章

订阅专栏

最近在做一个to c的项目，需要兼容PC、移动端且要支持chrome、firfox、uc一大堆，vue3都不支持ie了然鹅产品经理说道:"虽然vue3不支持ie11及以下，但是用户在ie中打开的时候你给我跳转到一个提示页好了..."，用下图来表示下心情~

The first round

要求：我们的项目只支持firefox58+、chrome76+、Safari10+

好说好说，那我就筛选出符合条件的呗，马不停蹄的敲代码and找度娘看各种浏览器内核的特性，最终写出如下代码

<script>
        // getVersion函数返回浏览器信息
        function getVersion() {
            const agent = navigator.userAgent.toLowerCase();
            let Browser = '';
            let Bversion = '';
            if (agent.indexOf('chrome') > 0) { // Chrome
                const regStrChrome = /chrome\/[\d.]+/gi;
                Browser = 'chrome';
                Bversion = '' + agent.match(regStrChrome);
            } else if (agent.indexOf('firefox') > 0) { // firefox
                const regStrFf = /firefox\/[\d.]+/gi;
                Browser = 'firefox';
                Bversion = '' + agent.match(regStrFf);
            } else if (agent.indexOf('safari') > 0 && agent.indexOf('chrome') < 0) { // Safari
                const regStrSaf = /version\/[\d.]+/gi;
                Browser = 'safari';
                Bversion = '' + agent.match(regStrSaf);
            }
            return {
                appName: Browser,
                appVer: (Bversion + '').replace(/[^0-9.]/ig, '').split('.')[0]
            };
        }
        window.onload = function() {
            const vInfo = getVersion();
            console.log('浏览器版本', vInfo);
            // 浏览器兼容版本：
            // firefox（58+)
            // safari（10+）
            // chrome（76+）
            const tooLow = !((vInfo.appName === 'chrome' && Number(vInfo.appVer) >= 76) ||
                (vInfo.appName === 'firefox' && Number(vInfo.appVer) >= 58) ||
                (vInfo.appName === 'safari' && Number(vInfo.appVer) >= 10));
            if (tooLow) {
                // 不符合条件的浏览器都展示不兼容页面
            }
        };
    </script>

The second round

要求：你这做的不行呀，我们的用户还可能在微信里打开链接，也得让他访问，稍微等会，在手机上用uc浏览器也允许打开吧，呃呃那手机自带浏览器也允许好了。

绕这么大一圈，需求变成了除了ie其他都行哈哈。以下是ie内核的特点

// ieBrowser函数返回当前是否是ie浏览器
function ieBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    return (isIE || isIE11) ? true : false;
}

window.onload = function() {
   var isIE = ieBrowser();
   if (isIE) {
       // 不符合条件的浏览器都展示不兼容页面
   }
};

顺带附上主流浏览器的内核

浏览器	内核	注释
IE	Trident	IE，猎豹安全、360极速浏览器、百度浏览器
firfox	Gecko	打开速度慢、更新频繁、有个猪队友叫flash并且有个神对手chrome。注定没落
Safari	Webkit
chrome	Chromium/Blink	在Chromium项目中研发Blink渲染引擎，内置于Chrome浏览器中。Blink其实是WebKit的分支。大部分国产浏览器最新版都才用Blink内核进行二次开发。
Opera	Blink