vue項目在IE瀏覽器中訪問空白問題

問題原因

IE9-IE11 不兼容ES6語法

解決方案：

安裝“babel-loader”

解決流程

停止項目運行

刪除項目中node_modules

執行命令

npm install
npm install -g webpack
npm install --save-dev babel-loader babel-core babel-preset-env

修改vue.config.js配置文件

在vue.config.js中的module.exports里添加以下代碼：

configureWebpack: {
 
    module: {
      rules: [
        // 'transform-runtime' 插件告訴 Babel
        // 要引用 runtime 來代替注入。
        {
          test: /\.m?js$/,
          // exclude用上面配置的話，默認是過濾不編譯node_modules 路徑下的文件
          // exclude: /(node_modules|bower_components)/,
          // include 指定需要編譯的文件路徑
          include: [
            resolve('src'),
            resolve('node_modules/tree-table-vue/lib'),
            resolve('node_modules/v-org-tree/dist'),
            resolve('node_modules/iview/src/locale'),
           // 下面三個根據需要自行添加
            resolve('node_modules/rview-c/dist'),
            resolve('node_modules/swiper/js'),
            resolve('node_modules/dom7/dist')
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }

重新運行項目

npm run dev

清空IE瀏覽器緩存

輸入網址測試

注意事項

• 不要使用cnpm安裝以上插件,太坑了！！
• 如果執行npm install -g webapck 命令時，報錯，不要驚慌

•  如果按照以上步驟，頁面仍然空白，F12查看報錯信息，點進去

 

上圖中就是瀏覽器報的具體哪一個插件沒有編譯成es5導致報錯，那么這時可以看到這個錯誤是strict-uri-encode，這個依賴沒有編譯，這時將這個包名strict-uri-encode寫進vue.config.js中的configureWebpack里去，然后重新啟動項目，那么這個錯誤就不會再報了。然后繼續在ie中打開，看看還有什么其他依賴報錯沒有，至此iview-admin在ie中白屏不能使用的問題解決思路徹底完畢。