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)識promise。需要我們在添加下面的依賴。
npm install es6-promise --save-dev
在main.js文件引入下面的內(nèi)容。
import promise from ‘es6-promise' promise.polyfill()
第三步：解決引用第三方庫IE瀏覽器不識別
項(xiàng)目中引入iview和我們公司自己樣式庫，部分語法在ie瀏覽器上不能識別報(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)目會發(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 只需要對 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項(xiàng)目中icon亂碼的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了vue?echarts移動(dòng)端踩坑解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue實(shí)現(xiàn)購物車計(jì)算總價(jià)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車計(jì)算總價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VUE響應(yīng)式原理的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了VUE響應(yīng)式原理的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue 開發(fā)企業(yè)微信整合,結(jié)合具體案例形式分析了vue.js使用企業(yè)微信JSSDK實(shí)現(xiàn)手機(jī)端程序可以和企業(yè)微信進(jìn)行整合功能的相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了vue-cli3 DllPlugin 提取公用庫 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡單的方法，可用組件router-link來替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11