背景

Vue2 項(xiàng)目在谷歌瀏覽器運(yùn)行好好的，在 IE 瀏覽器打開就會出現(xiàn)各種的問題。。

控制臺報(bào)錯(cuò) ：SCRIPT1010: 缺少標(biāo)識符

文件：app.403ea2d4.js，行：1，列：180

問題

同伴 IE 瀏覽器項(xiàng)目打不開，頁面白屏，而我自己本地卻能打開，不過項(xiàng)目在測試環(huán)境的地址也是打不開的，也是加載不出來頁面，控制臺報(bào)錯(cuò)SCRIPT啥的。

然后百度，試了各種方法，包括調(diào)整 IE 瀏覽器設(shè)置的 Internet 選項(xiàng)內(nèi)的各種配置項(xiàng)（ 沒用 ），因?yàn)槲覀€(gè)人的本地沒問題，所以開始以為該不會是她 IE 瀏覽器配置的問題，最后甚至還想過重新安裝一遍 IE 瀏覽器呢，不過最后回過頭來發(fā)現(xiàn)并不是瀏覽器的問題。（ 也是因?yàn)槲覍⑽冶镜氐牡刂钒l(fā)給她，是可以在 IE 瀏覽器打開，她的地址給我的話同樣也打不開，我甚至猜測我倆就端口號不一樣為啥就不行呢？跟端口號有啥關(guān)系，最后感覺應(yīng)該還是我倆本地項(xiàng)目的配置項(xiàng)可能在哪個(gè)地方有出入了吧，因?yàn)槲覀z的代碼是合并同步過了的，所以就很奇怪，一頭霧水。。）

我們還嘗試了將 VSCode 編輯器里的 settings 全局配置文件改了一下配置項(xiàng)：

"prettier.trailingComma": "none", // 用于去掉末尾的逗號

因?yàn)榘俣扔械恼f是關(guān)于什么 JSON 最后一項(xiàng)末尾不能有逗號之類的，然后所有文件就又重新保存了一遍，最后改完發(fā)現(xiàn)并沒有什么卵用。

然后沒辦法的辦法就是求助他人的幫助了，開始問大佬們?nèi)绾谓鉀Q，

IE 無非就是：兼容沒做全。

但是我本地項(xiàng)目 main.js 入口文件里面都引入了兼容性插件了啊

import "babel-polyfill"; // 解決IE兼容性問題
import "core-js/stable"; // 解決IE不兼容新的api
import "regenerator-runtime/runtime"; // 

( 有猜測是不是因?yàn)?babel-polyfill 和 core-js/stable 這兩個(gè)兼容性插件起沖突了呢？ 之后確實(shí)也是把 core-js/stable 刪除了，沒有用它 ，也可以的 。)

然后就是報(bào)錯(cuò)信息點(diǎn)進(jìn)去想看一下具體哪個(gè)方法出問題了

文件：app.403ea2d4.js，行：1，列：180

結(jié)果顯示的文件打包壓縮過了，而且這個(gè) app.js 是所有首次加載依賴的文件都會打進(jìn)去，

所以根本看不出來報(bào)錯(cuò)有標(biāo)注哪個(gè)文件，所以也就找不到哪個(gè)方法出了問題。

又嘗試將 config.js 文件里面的一個(gè)配置調(diào)整一下再試試：

直接在 productionSourceMap：加一個(gè)判斷 不是 dev 環(huán)境就 true

module.exports = {
  productionSourceMap: process.env.NODE_ENV === "development" ? false : true, // 取消 .map 文件的打包，加快打包速度
}

（ 一開始以為這個(gè)配置項(xiàng)只是為了加快打包速度的，后來才知道還能夠定位到問題所在，設(shè)置為 true 后就可以看源碼了 。）

測試環(huán)境默認(rèn)打包是 product 環(huán)境，配置的前后臺環(huán)境還是測試環(huán)境地址即可，

然后打完測試包，部署一下放到測試環(huán)境。或者讓項(xiàng)目經(jīng)理構(gòu)建一下。

在測試環(huán)境中運(yùn)行一下，看一下控制臺報(bào)錯(cuò)。

再然后想著排查是不是因?yàn)樽罱螺d了哪些插件導(dǎo)致的？

（ 比如 是不是 Echarts 插件版本太高，考慮要不要降低一下版本 等等。。 ）

因?yàn)轫?xiàng)目是開發(fā)了挺長一段時(shí)間才想起來在 IE 瀏覽器上面看一下的，而且之前是可以在 IE 正常訪問打開的。結(jié)果發(fā)現(xiàn)現(xiàn)在打不開了。。

其實(shí)吧，主要是遇到這種兼容性問題毫無頭緒，根本沒有解決思路，所以又請教了一位大神，給了一個(gè)思路，意思就是說，我們倆代碼即然一樣，為啥在瀏覽器上面就有的能打開，有的打不開呢？覺得我倆肯定是哪些配置方面還是有出入的，所以：

在本地重新新建一個(gè)項(xiàng)目文件，比如 test ，

然后拉取遠(yuǎn)程倉庫的代碼， git clone 遠(yuǎn)程倉庫項(xiàng)目地址

進(jìn)入到項(xiàng)目文件目錄下 ， npm install 下載項(xiàng)目所需的依賴包，

（ 本項(xiàng)目 node-sass@1.14.1 依賴包下載失敗，用原來下載好的 node-sass@1.14.1壓縮包解壓到項(xiàng)目 node_modules 下 ）

npm run serve 啟動(dòng)一下項(xiàng)目看結(jié)果

哎，神奇的是，我的 IE 瀏覽器頁面打開也不行了，

控制臺報(bào)錯(cuò) ：SCRIPT1002: 語法錯(cuò)誤

文件：chunk-vendors.js，行：16476，列：46

百度到 ：

項(xiàng)目組最近反饋 vue 最新腳手架搭建的項(xiàng)目不支持IE，提示sockjs錯(cuò)誤，采用墊片也不好使

但我的項(xiàng)目里面兩個(gè)都配置上還是不生效呢，應(yīng)該只配置一個(gè)的話就好使了 ：

transpileDependencies:['sockjs-client']

但后來，嘗試過不配置也可以了。。

然后經(jīng)理又幫我們找了一篇關(guān)于 “IE11兼容性改造” 的文章給我們閱讀借鑒經(jīng)驗(yàn) ：

文章內(nèi)容比較多，只抽取其中對項(xiàng)目有用的部分來介紹：

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"
  }

主要就是下載一個(gè) 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 文件修改為 ：

這里我直接將里面所有的代碼都給注釋掉了，因?yàn)閳?bào)錯(cuò) 影響我項(xiàng)目啟動(dòng)

3、babel.config.js 修改為 ：應(yīng)該不是這個(gè)影響的，可自行嘗試一番

// // 初始代碼
// module.exports = {
// 	presets: ['@vue/cli-plugin-babel/preset'],
// };

// // 項(xiàng)目原配置（es6 ）
// module.exports = {
// 	presets: ['@vue/app'],
// 	env: {
// 		development: {
// 			plugins: ['dynamic-import-nodes'], // 解決項(xiàng)目啟動(dòng)慢的問題
// 		},
// 	},
// };

// IE11兼容性配置
module.exports = {
	presets: [
		'@vue/app',
		{
			useBuiltIns: 'entry',
			corejs: 3,
			polyfills: ['es.promise', 'es.symbol'],
		},
	],
};

4、public/index.html 刪除引入的組件

5、vue.config.js 修改為 ：

實(shí)際也沒進(jìn)行啥修改，就是添加了一項(xiàng)配置 ：

transpileDependencies: ["decimal.js", "sockjs-client", "crypto-js"]

但感覺是配置 "sockjs-client" 就可以，或者后來嘗試不配置此項(xiàng)也可以。。

（ 其中 ，transpileDependencies 內(nèi)部是需要單獨(dú)進(jìn)行 IE 兼容處理的依賴。 ）

6、src / main.js 入口文件添加 IE 兼容性設(shè)置 ：

import "core-js/stable";
import "regenerator-runtime/runtime";

運(yùn)行或部署

工程完成IE兼容改造后，重啟項(xiàng)目看效果。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論