記一次vue專案ie相容性問題

2022-07-12 01:51:17 字數 1153 閱讀 8230

專案是使用公司自己的腳手架搭建的,其中引入了基於element-ui修改的ui框架。在ie中白屏顯示,並且報錯。

script1028: script1028: expected identifier, string or number
檢視公司文件後發現需要在vue.config.js中新增transpiledependencies引數配置

module.exports = ;
因為babel預設只轉義src中的檔案,加上transpiledependencies後,可以為node_modules中的依賴開啟轉換。

本以為這就完事了,結果發現不僅ie沒起作用,就連chrome都報錯了。。。

chrome報錯:

uncaught typeerror: cannot assign to read only property 'exports' of object '#'
ie報錯:

assignment to read-only properties is not allowed in strict mode
原因是import和module.exports混用了,所以webpack報錯了。

查了半天網上的解決辦法都沒用,直到看到這篇文章。

在babel.config.js裡面加unambiguous屬性

module.exports =
讓babel和webpack一樣嚴格區分commonjs檔案和es6檔案。

改完之後chrome正常了,edge瀏覽器也能看了但是ie還是不行。報錯script1002: 語法錯誤 chunk-vendors.js (9461,3),沒辦法只能點進去看到底是什麼問題。

後來發現是element-ui和vue-particles的問題,於是在transpiledependencies中又新增了這兩個依賴。

重啟專案,ok了。但是很奇怪啊,為什麼element-ui也需要加進去,別的使用element-ui的專案也沒加,ie就可以看啊?難道是因為@pillarjs這個依賴使用了element-ui的原因?

IE相容性問題 一

一 在ie6下,內容會把父元素設定好的寬高撐開 lang en charset utf 8 name keywords name description content 描述 documenttitle 去除預設外邊距 內邊距 二 ie6元素浮動,若寬度需要內容撐開,裡面塊級元素的內容也要加浮動 l...

IE相容性問題

通過濾鏡來解決 background rgba 255,255,255,1 火狐,谷歌等 filter progid dximagetransform.microsoft.gradient startcolorstr 19ffffff,endcolorstr 19ffffff 相容ie顏色 19ff...

IE相容性問題

一 css hack 目的是是你的css 相容不同的瀏覽器 書寫順序 一般將使用範圍廣,被識別能力強的css的前面 1 只有ie下生效 ie10以下 2 只有在ie8下生效 3 只在ie8不生效 4 只在ie8以上版本生效 二 屬性字首法 在css屬性名前加上一些只有特定瀏覽器才能識別的hack字首...