vue中element ie9的相容問題
阿新 • • 發佈:2019-01-24
- 可能的原因1,element-ui 中使用了 display: flex; 樣式,IE9不支援次樣式,解決方法為,排查下各元件,避免使用帶 display: flex; 的元件
可能的原因2,IE9瀏覽器過於老舊,單檔案最大行數超過一定限制將不再讀取後邊的內容,因此可以嘗試分割css檔案和打包的js檔案
- 分割js檔案,最好的方法是採用vue的路由懶載入,這樣打包時,vue-loader會把每個路由對應的js檔案打包在一起。同時注意元件的合理劃分,避免單元件體積過大,並提高元件的複用性
- 分割css檔案,通過
yarn add css-split-webpack-plugin -D
安裝css-split-webpack-plugin
// 引入依賴 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]'