vue2.0 + iview問題總結

develop_發表於2018-07-27
VueView

vue + iview + webpack專案在ie瀏覽器中不能正常執行。
主要原因是程式碼中使用es6語法，在低版本瀏覽器中無法識別。

解決辦法：
（1）webpack不會編譯static下的js檔案，所以js檔案不要寫在static資料夾中；
（2）vue2+Webpack+ES6 相容低版本瀏覽器 安裝 “babel-polyfill”

 命令：npm install --save-dev babel-polyfill
 在根目錄main.js檔案引入：import `babel-polyfill`
 在build資料夾下找到webpack.base.conf.js檔案
   entry: {
     app: ["babel-polyfill", "./src/main.js"]
   }

（3）安裝依賴一個外掛解決ES6/ES7高階語法相容

 npm install --save-dev babel-preset-es2015-ie
 在根目錄下.babelrc資料夾中：
 {
  "presets": [
  // env項是藉助外掛babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設定amd,commonjs這樣的模組化檔案，不進行轉碼
   ["env", {
     "modules": false,
     "targets": {
     "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     }
    }],
  // 下面這個是不同階段出現的es語法，包含不同的轉碼外掛
    "stage-2"
   ],
// 下面這個選項是引用外掛來處理程式碼的轉換，transform-runtime用來處理全域性函式和優化babel編譯
  "plugins": ["transform-runtime"]
 }

（4）webpack-dev-server官方放棄了舊版瀏覽器的支援，把版本回滾到 webpack-dev-server@2.7.1

 npm uninstall webpack-dev-server
 npm install webpack-dev-server@2.7.1 --save-dev

（5）重點來了，在使用iview時儘量使用全域性安裝，不要按需載入，IE瀏覽器很多問題都是iview按需載入的鍋

相關文章