vue-cli3項目在IE瀏覽器打開兼容問題及解決

Posted on by

vue-cli3在IE瀏覽器打開兼容問題

問題描述

vue打包的項目在ie瀏覽器上，不能打開。找瞭一天的解決方案，解決一個又報一個兼容錯誤，一步一坑一步一填，終於解決瞭問題🙂。我們需要瞭解的ie瀏覽器支持版本大於ie8。

方案

第一步：安裝babel-polyfill依賴

解決es6語法的兼容問題

npm install babel-polyfill --save-dev

在main.js 文件中引用這個庫，import ‘babel-polyfill’

第二步：安裝es6-promise依賴

走瞭第一步，又出現瞭一個坑，ie瀏覽器不認識promise。需要我們在添加下面的依賴。

npm install es6-promise --save-dev

在main.js文件引入下面的內容。 

import promise from ‘es6-promise'
promise.polyfill()

第三步：解決引用第三方庫IE瀏覽器不識別

項目中引入iview和我們公司自己樣式庫，部分語法在ie瀏覽器上不能識別報錯。

在項目的根目錄中找到vue.config.js文件，修改webpack的配置。

 chainWebpack: config => {
   config.module.rule('iview')
     .test(/\.js$/)
     .use('babel')
     .loader('babel-loader')
     .end()
 }

vue-cli 在IE下兼容設置

首先看 vue 官網上給出的 vue-cli 在瀏覽器中的兼容性，圖中表示是兼容 IE 9的，但是在IE9中打開項目會發現一片空白。

解決辦法如下

第一步、安裝 babel-polyfill

npm install --save babel-polyfill

第二步、在 main.js 中的最前面引入 babel-polyfill

import 'babel-polyfill';

第四步、修改 config 中的 webpack.base.conf.js 中的編譯配置

entry: {
	// app: './src/main.js',
	app: ["babel-polyfill", "./src/main.js"]
}

如果你隻用到瞭 axios 隻需要對 promise 進行兼容，可以隻用 es6-promise

npm install es6-promise --save

在 main.js 中的最前面引入

import 'es6-promise/auto';

完成以上配置，IE 9 兼容就完成瞭。

全局引入 babel-polyfill 有 90KB 以上，

也可以不安裝 babel-polyfill，使用以下方式：在 index.heml 頁面最前面添加以下代碼。

<script src="https://cdn.staticfile.org/babel-polyfill/6.2.4/polyfill.min.js"></script>

然後修改 webpack.base.conf.js

externals: {
	'vue': 'Vue',
	'element-ui': 'ELEMENT',
	'vue-router': 'VueRouter',
	'vuex': 'Vuex',
	'echarts': 'echarts',
	'babel-polyfill': 'window'
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：