vue兼容IE報錯怎么辦-創(chuàng)新互聯(lián)

小編給大家分享一下vue兼容IE報錯怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年的合川網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整合川建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“合川網(wǎng)站設(shè)計”,“合川網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

IE 頁面空白

報錯信息

此時頁面一片空白

報錯原因

Babel 默認(rèn)只轉(zhuǎn)換新的 JavaScript 語法（如箭頭函數(shù)），而不轉(zhuǎn)換新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的對象或者方法。

例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。為了解決這個問題，我們使用一種叫做 Polyfill（代碼填充，也可譯作兼容性補?。┑募夹g(shù)。

簡單的說，兼容問題一般是IE 對于es6 的部分新對象、表達式，語法并不支持，解決方案是使用 babel-polyfill 來正常使用ES6。

Polyfill 是什么

舉個例子，有些舊瀏覽器不支持 Number.isNaN方法，Polyfill就可以是這樣的：

if(!Number.isNaN) {
  Number.isNaN = function(num) {
    return(num !== num);
  }
}

Polyfill就是類似這樣解決API的兼容問題

解決方案

1、使用babel-polyfill

引入 babel-polyfill

npm i -S babel-polyfill

如何使用

使用它時需要在你應(yīng)用程序的入口點頂部或打包配置中引入。

在main.js 引入

import 'babel-polyfill'

或者在config中的 webpack.base.conf.js中 修改配置

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

2、在index.html 加入以下代碼（非必須）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3、babel-loader 中指定模塊轉(zhuǎn)碼

增加了poly-fill還是報錯，這一般是使用了第三方的ui框架、庫、插件等，并且這些ui框架、庫、插件底層有es6的語法。

找到webpack.base.conf.js 中的babel-loader

比如我這里用了element-ui 跟 v-charts 修改成如下：

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
     resolve('src'),
     resolve('test'),
     resolve('node_modules/webpack-dev-server/client'),
     resolve('node_modules/v-charts/src'),
     resolve('node_modules/vue-awesome'),
     resolve('node_modules/element-ui/packages'),
     resolve('node_modules/element-ui/src')
    ]
}

4、打包問題

如果是webpack代碼打包出錯，一般到 github webpack Issues中可以找到答案

這個錯誤是因為webpack-dev-server 版本問題

5、Babel 配置 .babelrc文件

.babelrc是Babel的配置文件，放在項目根目錄下。一般情況下.babelrc文件不需要修改，如果以上都做了，還是報錯，可以看下官網(wǎng)文檔來配置下該文件

在項目使用 vue-cli 生成的代碼中，根目錄有一個 .babelrc 文件。在默認(rèn)生成的模板內(nèi)容中，增加 "useBuiltIns": "entry"，這是一個指定哪些內(nèi)容需要被 polyfill(兼容) 的設(shè)置

useBuiltIns 有三個設(shè)置

• false - 不做任何操作

• entry - 根據(jù)瀏覽器版本的支持，將 polyfill 需求拆分引入，僅引入有瀏覽器不支持的polyfill

• usage - 檢測代碼中 ES6/7/8 等的使用情況，僅僅加載代碼中用到的 polyfill

{
 "presets": [
  ["env", {
   "modules": false,
   "useBuiltIns": "entry"
  }],
  "stage-2"
 ],
 "plugins": ["transform-runtime", "transform-vue-jsx"],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

具體相關(guān)可以查看Babel官網(wǎng)：https://www.babeljs.cn/

總結(jié)

1、用vue 寫的項目最多可以兼容到IE9 及以上版本

2、使用babel-polyfill

3、在babel-loader中指定需要轉(zhuǎn)碼的第三方的ui框架、庫、插件路徑

4、配置 .babelrc文件

5、Babel 是一個厲害的東西https://www.babeljs.cn/

補充：

問題：ie瀏覽器autoprefixer自動補全css前綴無效

解決方法：

ie發(fā)現(xiàn)使用內(nèi)聯(lián)樣式，autoprefixer無法生效，所以需要寫到style標(biāo)簽內(nèi)。

問題：ie10打開包語法錯誤，如圖所示

解決方法

點擊app.js,跳轉(zhuǎn)到報錯的位置，如圖

發(fā)現(xiàn)最后一行有個import的文件，所以鎖定到錯誤肯定是在引入的這個文件內(nèi)。

把common.js打開，檢查語法，發(fā)現(xiàn)有個變量定義用了ES6的語法let。所以引入的文件，插件沒有起作用。

沒有將ES6轉(zhuǎn)ES5。然后修改了之后，問題解決。

以上是“vue兼容IE報錯怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：vue兼容IE報錯怎么辦-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article10/dspsgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站設(shè)計、搜索引擎優(yōu)化、微信小程序、面包屑導(dǎo)航、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)