vue-cli3項(xiàng)目在IE瀏覽器打開兼容問題及解決
vue-cli3在IE瀏覽器打開兼容問題
問題描述
vue打包的項(xiàng)目在ie瀏覽器上，不能打開。找了一天的解決方案，解決一個(gè)又報(bào)一個(gè)兼容錯(cuò)誤，一步一坑一步一填，終于解決了問題??。我們需要了解的ie瀏覽器支持版本大于ie8。
方案
第一步：安裝babel-polyfill依賴
解決es6語法的兼容問題
npm install babel-polyfill --save-dev
在main.js 文件中引用這個(gè)庫，import ‘babel-polyfill’
第二步：安裝es6-promise依賴
走了第一步，又出現(xiàn)了一個(gè)坑，ie瀏覽器不認(rèn)識(shí)promise。需要我們?cè)谔砑酉旅娴囊蕾嚒?/p>
npm install es6-promise --save-dev
在main.js文件引入下面的內(nèi)容。
import promise from ‘es6-promise' promise.polyfill()
第三步：解決引用第三方庫IE瀏覽器不識(shí)別
項(xiàng)目中引入iview和我們公司自己樣式庫，部分語法在ie瀏覽器上不能識(shí)別報(bào)錯(cuò)。
在項(xiàng)目的根目錄中找到vue.config.js文件，修改webpack的配置。
chainWebpack: config => {
config.module.rule('iview')
.test(/\.js$/)
.use('babel')
.loader('babel-loader')
.end()
}
vue-cli 在IE下兼容設(shè)置
首先看 vue 官網(wǎng)上給出的 vue-cli 在瀏覽器中的兼容性，圖中表示是兼容 IE 9的，但是在IE9中打開項(xiàng)目會(huì)發(fā)現(xiàn)一片空白。
解決辦法如下
第一步、安裝 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 只需要對(duì) promise 進(jìn)行兼容，可以只用 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'
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue從零實(shí)現(xiàn)一個(gè)消息通知組件的方法詳解
這篇文章主要介紹了vue從零實(shí)現(xiàn)一個(gè)消息通知組件的方法,結(jié)合實(shí)例形式分析了vue實(shí)現(xiàn)消息通知組件的具體原理、實(shí)現(xiàn)步驟、與相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue3 axios安裝及使用示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
vue使用v-model進(jìn)行跨組件綁定的基本實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue使用v-model進(jìn)行跨組件綁定的基本實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持
本篇文章主要介紹了詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Vue綁定內(nèi)聯(lián)樣式的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
詳解如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue的全局提示框組件實(shí)例代碼,需要的朋友可以參考下2018-02-02
使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過Vue指令實(shí)現(xiàn)了這個(gè)功能,需要的朋友可以參考下2023-09-09
vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
大家在寫系統(tǒng)的時(shí)候,會(huì)有這樣的需求：點(diǎn)擊修改后把需要修改的數(shù)據(jù)放入表單,其中會(huì)有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無法選中問題,感興趣的朋友一起看看吧2024-03-03