Vue 中使用 babel-polyfill 來相容低版本瀏覽器
文章目錄
報錯示例
使用了 Vue 以及用 axios 來發請求,在谷歌瀏覽器上面,預覽是沒有問題的:
(下圖中紅色內容,是我調介面獲取到的內容,然後顯示在頁面上)
但是在 IE 瀏覽器下,卻沒有看到介面獲取的內容顯示在頁面上
F12,看了一下錯誤資訊:
包括安卓5以下的裝置,也會有這種情況。
背景知識
Babel 預設只轉換新的 JavaScript 句法,而不轉換新的 API,比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全域性物件,以及一些定義在全域性物件上的方法(比如 Object.assign)都不會轉碼。Babel 預設不轉碼的 API 非常多,詳細清單可以檢視
原因
原因就是 axios 是基於 promise 來實現的,IE 和低版本的裝置不支援 promise。
解決方案
方案一、使用 es6-promise
npm install es6-promise -S
// 在 main.js 首行引入即可
require("es6-promise").polyfill()
這樣,就已經可以解決你的問題了。
因為我的專案中是有對 axios 進行封裝的,而且我也不喜歡在 main.js 中來做這個操作,所以我將這個操作移到了 request.js 這個檔案的開頭。(request.js 的用途是用來對 axios 進行封裝)
// request.js
require("es6-promise").polyfill()
import axios from 'axios'
當然,你也可以使用 import 的方式:
// request.js
import 'es6-promise/auto'
import axios from 'axios'
ok,現在問題解決了【IE和低版本的安卓裝置都沒問題了】:
方案二、使用 babel-polyfill
npm install babel-polyfill -S
// 在 main.js 首行引入即可
import "babel-polyfill"
因為我的專案中是有對 axios 進行封裝的,而且我也不喜歡在 main.js 中來做這個操作,所以我將這個操作移到了 request.js 這個檔案的開頭。(request.js 的用途是用來對 axios 進行封裝)
// request.js
import 'babel-polyfill'
import axios from 'axios'
或者:
webpack.config.js
中:
module.exports = {
// entry: {
// app: './src/main.js'
// },
entry: ['babel-polyfill', './src/main.js'],
}
將原來的
entry: {
app: './src/main.js'
}
改為:
entry: ['babel-polyfill', './src/main.js']
重新執行構建命令,問題同樣解決了,IE和低版本安卓裝置都可以正常傳送請求了。很棒!
Tip
最後還是有一點提示想對你說:
1、不管是方案一還是方案二,建議的使用方式都是在 request.js 的頭部引入。
2、es6-promise 和 babel-polyfill 檔案大小的問題:
兩者體積大小沒有明顯差異。
OK,寫完了,希望可以幫到你們。提前祝大家週末愉快。
---------------------------(正文完)------------------------------------
一個 Vue 的學習交流群,想進來面基的,可以點選這個logo,或者手動search群號:685486827
--------------------------------(完)--------------------------------------
更多學習資源請關注我的新浪微博…
相關推薦
Vue 中使用 babel-polyfill 來相容低版本瀏覽器
文章目錄報錯示例背景知識原因解決方案Tip 報錯示例 使用了 Vue 以及用 axios 來發請求,在谷歌瀏覽器上面,預覽是沒有問題的: (下圖中紅色內容,是我調介面獲取到的內容,然後顯示在頁面上) 但是在 IE 瀏覽器下,卻沒有看到介面獲取的內容顯示在頁面上
React+Webpack+Antd+Babel 相容低版本瀏覽器(下)
回顧起因某天,某測試說:“這個頁面在 IE8 下白屏,9也白。。”某前端開發: 吭哧吭哧。。。一上午的時間就過去了,搞定了。第二天,某測試說:“IE 又白了。。”某前端開發: 嘿咻嘿咻。。。誰用的 Object.assign,出來我保證削不屎你。在上篇,我們主要丟擲了兩個問題
html5相容低版本瀏覽器
在JS程式碼中加入 <script type="text/javascript">document.createElement('header'); document.createElement('nav'); document.createElement('
從 ie10瀏覽器下Symbol 未定義的問題 探索vue專案如何相容ie低版本瀏覽器(ie9, ie10, ie 11 )
問題: vue專案在ie11下一片空白並報Symbol 未定義的錯 原因: ie10瀏覽器解析不了es6的語法,需要我們使用babel(Babel是一種工具鏈,主要用於將ECMAScript 2015+程式碼轉換為當前和舊版瀏覽器或
關於vue專案在低版本瀏覽器中不支援ES6的解決方案
原因:低版本瀏覽器核心版本太低,無法解析 ES2015最新的一些語法。 babel是一個轉譯器,把同種語言的高版本規則翻譯成低版本規則 一般搭建專案時webpack會在最外層配置一個.babelrc檔案用於預設解析ES2015(es6)中的特殊語法(例如: le
使用RenderScript來實現高斯模糊,相容低版本
這兩天看到公司工程裡有用到高斯模糊,是通過java實現的,很慢,所以找了一些資料,看到RenderScript,效能很好,而且RenderScript是可以相容低版本的,實現方式也是jni。相容低版本的教程網上有很多,就是在sdk目錄裡把RenderScript v8包新增
vue解決ie與低版本瀏覽器es6相容問題
使用vue-cli搭建vue專案打包後在ie上開啟靜態資源出現空白,但是在chrome上一切正常,經檢測發現打包後的js存在相容問題,ie等低版本瀏覽器對es6存在不支援情況,解決方法如下: 1. 安裝babel-polyfill npm i babel-polyfill
AppCompat 22 1 Google暴走,MD全面相容低版本
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
前端開發相容低版本IE注意事項
1.如果要在地址中使用中文引數的話,使用encodeURIComponent()對中文進行編碼,否則在老版本的IE中可能出現地址錯誤(400)。 2.在任何業務情況下,後臺傳過來,前端解析的引數都要明確的值,即使是‘’或者[],儘量不要存在null,如果可能會出現不同的物件走同一條業務流程,加上if("un
IntelliJ IDEA不相容低版本jdk的解決
本人裝的是IntelliJ IDEA 2017,win7 32位的系統,jdk的版本是1.6,開啟IDEA的時候,發現IDEA會報Cannot start under Java 1.6 :java 1.8 or later is required這個錯誤,(也就是不相容低版本
Android 揭露效果相容低版本
自定了一個ImageView,和Android揭露效果想同。 效果: 程式碼如下: CircularRevealImageView.java import android.content.Context
webpack4與babel配合使es6程式碼可運行於低版本瀏覽器
使用es6+新語法編寫程式碼,可是不能運行於低版本瀏覽器,需要將語法轉換成es5的。那就藉助babel7轉換,再加上webpack打包,實現程式碼的轉換。 轉換包括兩部分:語法和API let、const這些是新語法。 new promise()等這些是新API。 簡單程式碼 類庫 utils.js cons
android狀態列一體化、沉浸式狀態列(相容低版本)
<TextView android:id="@+id/tv_title" android:layout_centerVertical="true" android:layout_width="match_parent"
fragment相容低版本
【1】Fragment導包必須都是import android.support.v4.app.Fragment; 【2】getSupportFragmentManager獲取Fragment的管理者 FragmentManager supportFragmentManage
android狀態列一體化 沉浸式狀態列 相容低版本
摘要 Android 沉浸式狀態列、狀態列一體化、透明狀態列、仿ios透明狀態列 推薦好用的工具類:http://jaeger.itscoder.com/android/2016/03/27/statusbar-util.html git地址:https://gith
讓array_column()函式相容低版本PHP
array_column 用於獲取二維陣列中的元素(PHP 5.5新增函式),但我們有時候需要在低版本的PHP環境中使用,只要做一個小的改造即可... 自定義一個函式i_array_column(),寫到TP的Comm
SoundPool工具類(單例模式),相容低版本
public class ClickSoundUtil { private Context context; private static SoundPool soundPool; private static int soundID; public stat
Android高版本不相容低版本gradle問題
Android 解決 .build.gradle.tasks.factory.AndroidJavaCompile.setDependencyCacheDir(Ljava/io/File;)V 我的是AndroidStudio 3.0 上匯
ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍(下)
回顧起因某天,某測試說:“這個頁面在 IE8 下白屏,9也白。。”某前端開發: 吭哧吭哧。。。一上午的時間就過去了,搞定了。第二天,某測試說:“IE 又白了。。”某前端開發: 嘿咻嘿咻。。。誰用的 Object.assign,出來我保證削不屎你。在上篇,我們主要丟擲了兩個問題
Notification(Notification的通知欄常駐、各種樣式、點選無效、禁止滑動刪除、相容低版本)
Notification(Notification的通知欄常駐、Notification的各種樣式、Notification點選無效、Notification禁止滑動刪除) Android的Notification是android系統中很重要的一個機制, 產品人員常常利用通