vue2.0 + iview IE瀏覽器中不能正常運行解決辦法

vue + iview + webpack項目在ie瀏覽器中不能正常運行。
主要緣由是代碼中使用es6語法,在低版本瀏覽器中沒法識別。vue

解決辦法:
(1)webpack不會編譯static下的js文件,因此js文件不要寫在static文件夾中;
(2)vue2+Webpack+ES6 兼容低版本瀏覽器 安裝 "babel-polyfill"webpack

命令: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高級語法兼容es6

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.1web

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

(5)重點來了,在使用iview時儘可能使用全局安裝,不要按需加載,IE瀏覽器不少問題都是iview按需加載的鍋npm

相關文章
相關標籤/搜索