vue-cli3項目在IE瀏覽器打開兼容問題及解決
更新時間：2022年08月31日 08:54:23 作者：qq_35321405
這篇文章主要介紹了vue-cli3項目在IE瀏覽器打開兼容問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-cli3在IE瀏覽器打開兼容問題
問題描述
vue打包的項目在ie瀏覽器上，不能打開。找了一天的解決方案，解決一個又報一個兼容錯誤，一步一坑一步一填，終于解決了問題??。我們需要了解的ie瀏覽器支持版本大于ie8。
方案
第一步：安裝babel-polyfill依賴
解決es6語法的兼容問題
npm install babel-polyfill --save-dev
在main.js 文件中引用這個庫，import ‘babel-polyfill’
第二步：安裝es6-promise依賴
走了第一步，又出現(xiàn)了一個坑，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中打開項目會發(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 進行兼容，可以只用 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'
}
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue項目中icon亂碼的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了vue?echarts移動端踩坑解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)購物車計算總價功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了VUE響應式原理的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue 開發(fā)企業(yè)微信整合,結合具體案例形式分析了vue.js使用企業(yè)微信JSSDK實現(xiàn)手機端程序可以和企業(yè)微信進行整合功能的相關操作技巧,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了Vue如何利用高德地圖API實現(xiàn)實時天氣,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要介紹了vue-cli3 DllPlugin 提取公用庫 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中實現(xiàn)路由跳轉的三種方式超詳細教程，其中聲明式router-link實現(xiàn)跳轉最簡單的方法，可用組件router-link來替代a標簽，每種方式給大家講解的非常詳細需要的朋友可以參考下2022-11-11