解決Vue+Element ui開發(fā)中碰到的IE問題
IE9樣式錯(cuò)亂，IE11無法正常加載v-loading等問題
引入了babel-polyfill插件，依然出現(xiàn)”polyfill-eventsource added missing EventSource to window”的奇怪問題(ie所有版本都有出現(xiàn))
第一步：安裝babel-ployfill （已安裝請(qǐng)?zhí)^此步驟）
yarn add babel-ployfill
修改webpack打包配置文件：webpack.bash.conf.js
// 引入babel-ployfill
var babelPloyfill = require('babel-ployfill')
// ...
// 修改entry字段
entry: {
// app: './src/main.js'
app: ["babel-polyfill", "./src/main.js"]
},
重新運(yùn)行，v-loading等問題完美解決， 原因可能是v-loading是調(diào)用的ES6的Object的setter和getter方法來實(shí)現(xiàn)的，babel-ployfill報(bào)錯(cuò)，未能將ES6的方法完全轉(zhuǎn)換為IE9支持的ES5方法
IE9樣式錯(cuò)亂
可能的原因1，element-ui 中使用了 display: flex; 樣式，IE9不支持次樣式，解決方法為，排查下各組件，避免使用帶 display: flex; 的組件
可能的原因2，IE9瀏覽器過于老舊，單文件最大行數(shù)超過一定限制將不再讀取后邊的內(nèi)容，因此可以嘗試分割css文件和打包的js文件
分割js文件，最好的方法是采用vue的路由懶加載，這樣打包時(shí)，vue-loader會(huì)把每個(gè)路由對(duì)應(yīng)的js文件打包在一起。同時(shí)注意組件的合理劃分，避免單組件體積過大，并提高組件的復(fù)用性
分割css文件，通過yarn add css-split-webpack-plugin -D安裝css-split-webpack-plugin包來分割組件，修改
webpack.prod.conf.js文件
// 引入依賴
var CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default
// 在css打包插件后面新增css分割插件
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// 新增的css分割插件
new CSSSplitWebpackPlugin({
size: 4000,
filename: utils.assetsPath('css/[name]-[part].[ext]')
}),
以上，寫bug我最擅長(zhǎng)了，找問題就不是我擅長(zhǎng)的了@_@!。雖然問題解決了，但是可能分析的不對(duì)，希望大神拍磚指導(dǎo)，也希望對(duì)新手小白有一些幫助。
這篇解決Vue+Element ui開發(fā)中碰到的IE問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Spring boot + mybatis + Vue.js + ElementUI 實(shí)現(xiàn)數(shù)據(jù)的增刪改查實(shí)例代碼(二)
- Spring boot + mybatis + Vue.js + ElementUI 實(shí)現(xiàn)數(shù)據(jù)的增刪改查實(shí)例代碼(一)
- vue.js+Element實(shí)現(xiàn)表格里的增刪改查
- Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法
- vue 2.0項(xiàng)目中如何引入element-ui詳解
- vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法
- vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
- vue element項(xiàng)目引入icon圖標(biāo)的方法
- vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法
- 解決vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit()不生效問題
- VUE+Element實(shí)現(xiàn)增刪改查的示例源碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)時(shí)間軸播放組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
React?Diff算法不采用Vue的雙端對(duì)比原因詳解
這篇文章主要介紹了React?Diff算法不采用Vue雙端對(duì)比算法原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
解決ElementUI組件中el-upload上傳圖片不顯示問題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)電子時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
一文帶你了解threejs在vue項(xiàng)目中的基本使用
three.js是一個(gè)用于在Web上創(chuàng)建三維圖形的JavaScript庫(kù),它可以用于創(chuàng)建各種類型的三維場(chǎng)景,包括游戲、虛擬現(xiàn)實(shí)、建筑和產(chǎn)品可視化等,下面這篇文章主要給大家介紹了關(guān)于如何通過一文帶你了解threejs在vue項(xiàng)目中的基本使用,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了解決vue移動(dòng)端適配問題,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
多頁(yè)vue應(yīng)用的單頁(yè)面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁(yè)vue應(yīng)用的單頁(yè)面打包方法(內(nèi)含打包模式的應(yīng)用)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Vite批量導(dǎo)入模塊/資源的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03