vue项目在ie上的限制提示分为两种情况：
1、在ie9版本以下的版本情况：
由于ie9以下的ie版本无法识别一下es6方法，所以在vue中的js无法执行，打开网站会直接白屏，没有任何显示。
sdfds
所以代码校验浏览器的代码不能在vue中运行，可以在index.html中运行校验浏览器版本的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- <title><%= htmlWebpackPlugin.options.title %></title> --> </head> <script> // ie9版本以下的提示 (function () { console.log(navigator); var ua = navigator.userAgent.toLocaleLowerCase(); var browserType = "", browserVersion = ""; if (ua.match(/msie/) != null || ua.match(/trident/) != null) { browserType = "IE"; //哈哈，现在可以检测ie11.0了！ browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1]; if ((1 * browserVersion) < 9) { alert("请在ie11版本浏览器上使用系统") } } })(); </script> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
2、在ie9版本以上的版本情况：
我们项目限制至少IE11能够使用，在router全局路由中路由守卫拦截中检测浏览器类型版本，ie11浏览器一下的跳转到到login.vue界面,在login界面提示或者限制使用IE11一下版本
router.config.js
router.beforeEach((to, from, next) => { function checkBrowser() { let ua = navigator.userAgent.toLocaleLowerCase(); let browserType = "", browserVersion = ""; console.log("ua ", ua); if (ua.match(/msie/) != null || ua.match(/trident/) != null) { browserType = "IE"; //哈哈，现在可以检测ie11.0了！ browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1]; } else if (ua.match(/firefox/) != null) { browserType = "Firefox"; // 火狐 } else if (ua.match(/opera/) != null) { browserType = "Opera"; // 欧朋 } else if (ua.match(/chrome/) != null) { browserType = "Chrome"; // 谷歌 } else if (ua.match(/safari/) != null) { browserType = "Safari"; // Safari } var arr = new Array(browserType, browserVersion); return arr; } let browserArr = checkBrowser(); if (browserArr[0] == 'IE' && (1 * browserArr[1]) < 11 && to.path != "/login") { next("/login") } else { next(); } })
login.vue
// 账号密码登录 acLogin() { let browserArr = this.checkBrowser(); if (browserArr[0] == "IE") { if ((1 * browserArr[1]) < 11) { this.$message.error("请在IE11浏览器或则其他非IE浏览器进行登录！"); return false; } } if (!this.loginForm.username || !this.loginForm.password) { this.$message({ message: "请输入账号和密码", type: "warning", }); return false; } var postData = { data: { username: this.loginForm.username, password: md5(this.loginForm.password), }, platformCode: 1, }; this.$axios({ method: "POST", url: "/userLogin/login", data: postData, }) .then((res) => { this.loginSuccess(res); }) .catch(() => { }); }, checkBrowser() { let ua = navigator.userAgent.toLocaleLowerCase(); let browserType = "", browserVersion = ""; // console.log("ua ", ua); if (ua.match(/msie/) != null || ua.match(/trident/) != null) { browserType = "IE"; //哈哈，现在可以检测ie11.0了！ browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1]; } else if (ua.match(/firefox/) != null) { browserType = "Firefox"; // 火狐 } else if (ua.match(/opera/) != null) { browserType = "Opera"; // 欧朋 } else if (ua.match(/chrome/) != null) { browserType = "Chrome"; // 谷歌 } else if (ua.match(/safari/) != null) { browserType = "Safari"; // Safari } var arr = new Array(browserType, browserVersion); return arr; }