1. 程式人生 > >vue中element ie9的相容問題

vue中element ie9的相容問題

  • 可能的原因1,element-ui 中使用了 display: flex; 樣式,IE9不支援次樣式,解決方法為,排查下各元件,避免使用帶 display: flex; 的元件
  • 可能的原因2,IE9瀏覽器過於老舊,單檔案最大行數超過一定限制將不再讀取後邊的內容,因此可以嘗試分割css檔案和打包的js檔案

    1. 分割js檔案,最好的方法是採用vue的路由懶載入,這樣打包時,vue-loader會把每個路由對應的js檔案打包在一起。同時注意元件的合理劃分,避免單元件體積過大,並提高元件的複用性
    2. 分割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]'
      ) }),