关于vue项目不能在ie浏览器打开的原因和解决办法以及ie无法监听路由的变化进行加载
1、vue项目对于ie的版本支持最低是ie8,目前ie的使用已经很少了,很多的ie版本是自带的ie11,当你创建了一个vue项目之后,在谷歌,火狐浏览器打开都非常正常,但是在ie打开发现页面空白了。打不开的原因是因为少了babel-polyfill处理器。babel-polyfill处理器可以将ES6代码转为ES5代码,从而可以在现有环境执行,这就是为什么ie浏览器不支持的原因解决办法:...
1、vue项目对于ie的版本支持最低是ie8,目前ie的使用已经很少了,很多的ie版本是自带的ie11,当你创建了一个vue项目之后,在谷歌,火狐浏览器打开都非常正常,但是在ie打开发现页面空白了。打不开的原因是因为少了babel-polyfill
处理器。
babel-polyfill
处理器可以将ES6代码转为ES5代码,从而可以在现有环境执行,这就是为什么ie浏览器不支持的原因
解决办法:
1.1使用命令进行下载babel-polyfill处理器
npm install babel-polyfill --save
1.2、在main.js
文件中引入babel-polyfill,也就是加一行:
import 'babel-polyfill';
1.3、改动webpack.base.config.js
将entry
中的app: './src/main.js'
配置改为:app: ['babel-polyfill', './src/main.js'] (大约在15行左右)
1.4、
最后重新启动项目运行
2、项目在ie正常打开之后,加入你有某一个路由是在当前页进行切换的,意思就是原本我们打开了一个a的页面,然后进行router.push({name: 'routername'})在A的当前页面进行页面切换,在谷歌或者火狐浏览器展示是十分正常的,但是ie浏览器就url的地址栏已经发生了改变,但是我们监听路由的变化然后进行重新获取数据的时候,发现并没有重新拿数据,也就是url发生了改变,但是数据并不是最新的,也就是下面的句子并不适用
watch:{
$route(){
this.getData()
}
},
那这个怎么解决呢?于是在网上开始查找这种解决办法
查找的方法有:
const isIE = (
/MSIE (\d+\.\d+);/.test(navigator.userAgent) || ~navigator.userAgent.indexOf('Trident/')
)
mounted() {
if (isIE) {
window.addEventListener('hashchange', () => {
let currentPath = window.location.hash.slice(1)
if (this.$route.path !== currentPath) {
this.$router.push(currentPath)
}
}, false)
}
},
但是我试过了并没有作用
于是我发现了只要在ie不是在当前页面切换的,是打开一个新的窗口,那么这样是可以获取到数据的,于是就有了下面的解决办法
// nav是一个完整的地址
navClick (nav) {
var userAgent = navigator.userAgent
var isIE = userAgent.indexOf('Trident') > -1
if (isIE) {
window.open(nav)
} else {
window.open(nav, "_self")
}
},
更多推荐
所有评论(0)