Vue項目在IE瀏覽器頁面白屏且報錯SCRIPT1010:缺少標識符問題
背景
Vue2 項目在谷歌瀏覽器運行好好的,在 IE 瀏覽器打開就會出現(xiàn)各種的問題。。
控制臺報錯 :SCRIPT1010: 缺少標識符
文件:app.403ea2d4.js,行:1,列:180
問題
同伴 IE 瀏覽器項目打不開,頁面白屏,而我自己本地卻能打開,不過項目在測試環(huán)境的地址也是打不開的,也是加載不出來頁面,控制臺報錯SCRIPT啥的。
然后百度,試了各種方法,包括調(diào)整 IE 瀏覽器設(shè)置的 Internet 選項內(nèi)的各種配置項( 沒用 ),因為我個人的本地沒問題,所以開始以為該不會是她 IE 瀏覽器配置的問題,最后甚至還想過重新安裝一遍 IE 瀏覽器呢,不過最后回過頭來發(fā)現(xiàn)并不是瀏覽器的問題。( 也是因為我將我本地的地址發(fā)給她,是可以在 IE 瀏覽器打開,她的地址給我的話同樣也打不開,我甚至猜測我倆就端口號不一樣為啥就不行呢?跟端口號有啥關(guān)系,最后感覺應(yīng)該還是我倆本地項目的配置項可能在哪個地方有出入了吧,因為我倆的代碼是合并同步過了的,所以就很奇怪,一頭霧水。。)
我們還嘗試了將 VSCode 編輯器里的 settings 全局配置文件改了一下配置項:
"prettier.trailingComma": "none", // 用于去掉末尾的逗號
因為百度有的說是關(guān)于什么 JSON 最后一項末尾不能有逗號之類的,然后所有文件就又重新保存了一遍,最后改完發(fā)現(xiàn)并沒有什么卵用。
然后沒辦法的辦法就是求助他人的幫助了,開始問大佬們?nèi)绾谓鉀Q,
IE 無非就是:兼容沒做全。
但是我本地項目 main.js 入口文件里面都引入了兼容性插件了啊
import "babel-polyfill"; // 解決IE兼容性問題 import "core-js/stable"; // 解決IE不兼容新的api import "regenerator-runtime/runtime"; //
( 有猜測是不是因為 babel-polyfill 和 core-js/stable 這兩個兼容性插件起沖突了呢? 之后確實也是把 core-js/stable 刪除了,沒有用它 ,也可以的 。)
然后就是報錯信息點進去想看一下具體哪個方法出問題了
文件:app.403ea2d4.js,行:1,列:180
結(jié)果顯示的文件打包壓縮過了,而且這個 app.js 是所有首次加載依賴的文件都會打進去,
所以根本看不出來報錯有標注哪個文件,所以也就找不到哪個方法出了問題。
又嘗試將 config.js 文件里面的一個配置調(diào)整一下再試試:
直接在 productionSourceMap:加一個判斷 不是 dev 環(huán)境就 true
module.exports = { productionSourceMap: process.env.NODE_ENV === "development" ? false : true, // 取消 .map 文件的打包,加快打包速度 }
( 一開始以為這個配置項只是為了加快打包速度的,后來才知道還能夠定位到問題所在,設(shè)置為 true 后就可以看源碼了 。)
測試環(huán)境默認打包是 product 環(huán)境,配置的前后臺環(huán)境還是測試環(huán)境地址即可,
然后打完測試包,部署一下放到測試環(huán)境?;蛘咦岉椖拷?jīng)理構(gòu)建一下。
在測試環(huán)境中運行一下,看一下控制臺報錯。
再然后想著排查是不是因為最近下載了哪些插件導(dǎo)致的?
( 比如 是不是 Echarts 插件版本太高,考慮要不要降低一下版本 等等。。 )
因為項目是開發(fā)了挺長一段時間才想起來在 IE 瀏覽器上面看一下的,而且之前是可以在 IE 正常訪問打開的。結(jié)果發(fā)現(xiàn)現(xiàn)在打不開了。。
其實吧,主要是遇到這種兼容性問題毫無頭緒,根本沒有解決思路,所以又請教了一位大神,給了一個思路,意思就是說,我們倆代碼即然一樣,為啥在瀏覽器上面就有的能打開,有的打不開呢?覺得我倆肯定是哪些配置方面還是有出入的,所以:
在本地重新新建一個項目文件,比如 test ,
然后拉取遠程倉庫的代碼, git clone 遠程倉庫項目地址
進入到項目文件目錄下 , npm install 下載項目所需的依賴包,
( 本項目 node-sass@1.14.1 依賴包下載失敗,用原來下載好的 node-sass@1.14.1壓縮包解壓到項目 node_modules 下 )
npm run serve 啟動一下項目看結(jié)果
哎,神奇的是,我的 IE 瀏覽器頁面打開也不行了,
控制臺報錯 :SCRIPT1002: 語法錯誤
文件:chunk-vendors.js,行:16476,列:46
百度到 :
項目組最近反饋 vue 最新腳手架搭建的項目不支持IE,提示sockjs錯誤,采用墊片也不好使
但我的項目里面兩個都配置上還是不生效呢,應(yīng)該只配置一個的話就好使了 :
transpileDependencies:['sockjs-client']
但后來,嘗試過不配置也可以了。。
然后經(jīng)理又幫我們找了一篇關(guān)于 “IE11兼容性改造” 的文章給我們閱讀借鑒經(jīng)驗 :
文章內(nèi)容比較多,只抽取其中對項目有用的部分來介紹:
1、package.json 內(nèi)容 :
"devDependencies": { "@vue/cli-plugin-babel": "~4.5.19", "@vue/cli-plugin-router": "~4.5.19", "@vue/cli-plugin-vuex": "~4.5.19", "@vue/cli-service": "~4.5.19", "sockjs-client": "1.5.1" }
主要就是下載一個 sockjs-client 依賴包 :
npm install sockjs-client@1.5.1 -D
IE 兼容性改造
1、.browserslistrc 文件修改為 :
> 1% last 2 versions ie 11
將 not dead 替換為 ie11
2、 .eslintrc.js 文件修改為 :
這里我直接將里面所有的代碼都給注釋掉了,因為報錯 影響我項目啟動
3、babel.config.js 修改為 :應(yīng)該不是這個影響的,可自行嘗試一番
// // 初始代碼 // module.exports = { // presets: ['@vue/cli-plugin-babel/preset'], // }; // // 項目原配置(es6 ) // module.exports = { // presets: ['@vue/app'], // env: { // development: { // plugins: ['dynamic-import-nodes'], // 解決項目啟動慢的問題 // }, // }, // }; // IE11兼容性配置 module.exports = { presets: [ '@vue/app', { useBuiltIns: 'entry', corejs: 3, polyfills: ['es.promise', 'es.symbol'], }, ], };
4、public/index.html 刪除引入的組件
5、vue.config.js 修改為 :
實際也沒進行啥修改,就是添加了一項配置 :
transpileDependencies: ["decimal.js", "sockjs-client", "crypto-js"]
但感覺是配置 "sockjs-client" 就可以,或者后來嘗試不配置此項也可以。。
( 其中 ,transpileDependencies 內(nèi)部是需要單獨進行 IE 兼容處理的依賴。 )
6、src / main.js 入口文件添加 IE 兼容性設(shè)置 :
import "core-js/stable"; import "regenerator-runtime/runtime";
運行或部署
工程完成IE兼容改造后,重啟項目看效果。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue解決element-ui消息提示$message重疊問題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08vue-print-nb實現(xiàn)頁面打印功能實例(含分頁打印)
在項目中,有時需要打印頁面的表格,在網(wǎng)上找了一個打印組件vue-print-nb,用了還不錯,所以下面這篇文章主要給大家介紹了關(guān)于vue-print-nb實現(xiàn)頁面打印功能的相關(guān)資料,需要的朋友可以參考下2022-08-08在vue框架下使用指令vue add element安裝element報錯問題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10Vue項目中使用jsonp抓取跨域數(shù)據(jù)的方法
這篇文章主要介紹了Vue項目中使用jsonp抓取跨域數(shù)據(jù)的方法,本文通過實例代碼講解的非常詳細,需要的朋友可以參考下2019-11-11vue radio單選框,獲取當前項(每一項)的value值操作
這篇文章主要介紹了vue radio單選框,獲取當前項(每一項)的value值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09