天天看點

vue-ant-design 在ie的相容問題

一開始沒有注意ie的相容,在谷歌中一切都很正常.

但是

才發現,當我在ie中運作的時候,界面直接白闆了,而且是ie 11. 還不是低版本,都已經行不通了

一直報錯, 有set的錯誤 ,也有SecurityError錯誤

忘記截圖了,因為項目已經做了配置就暫不添加截圖,下個項目再把截圖補上

于是我查了很久,很多文章顯示使用 babel-polyfill 可以

是以我安裝了,此時ie11可以顯示了,ie10和下面的版本一樣都是白闆,出現 set 的錯誤

安裝 babel-polyfill

npm i  babel-polyfill  --save
           

vue.config.js

chainWebpack: config => { // ie相容 
		config.entry('main').add('babel-polyfill') 
	},
           

此時ie11可以顯示,也能正常點選,就是還有bug

ie10及以下還是白闆,于是我又安裝了

cors

npm i cors
           

babel.config.js

presets: [
    '@vue/cli-plugin-babel/preset',
		[
			'@babel/preset-env',
			{
				'useBuiltIns': 'entry',  //前面這些是vue-ant按需引入需要的配置
				'corejs':3
			}
		]
  ],
           

然後我的main.js中隻在頭部添加了這個

就這樣ie9都能顯示出來了.但是ie9樣式都無效了.這個問題還需要轉換一下,

es6轉換es5

css3的樣式不生效得想辦法變成css樣式

目前就寫到這裡,後期有改進的,再進行修改

繼續閱讀