乐趣区

关于vue.js:VUE-项目在IE11白屏报错-SCRIPT1002-语法错误

jiezi

问题景象

我的项目应用 vue/cli3 脚手架搭建的前端我的项目，vue 版本为 2.6.10。

browserslist 的配置如下：

["> 1%", "last 2 versions"]

但开发环境的 IE11 关上显示白屏，F12 关上显示：

剖析过程

5306 行显示 “./node_modules/_debug@4.1.1@debug/src/browser.js” 这个门路报错，因为 eval() 蕴含的代码中有 ES6 的语法，IE 不反对，查了网上很多材料都说应用 babel-polyfill 来解决。

景象一：IE 不反对 ES6 语法

  • Vuex requires a Promise polyfill in this browser
  • ““Promise”未定义 ”

以上景象为 IE 不反对 Promise，即不反对 ES6 语法。呈现 IE 白屏和报 SCRIPT1002 谬误的大都是此起因。以后解决起来也比较简单，网上大部份资源都能够找到解决方案，就是应用 babel-polyfill。

首先装置 babel-polyfill

npm install --save-dev babel-polyfill

而后在 babel.config.js 批改 presets，内容如下：

// presets: [["@vue/app", {useBuiltIns: "entry",}]],// 此为 vue/cli3
presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry",}]],// 此为 vue/cli4
解决办法一

main.js 的第一行引入：

import 'babel-polyfill'; 复制代码
解决办法二：

vue cli 官网举荐应用，前提是 package.json 装置了 core-js：

import 'core-js/stable';import 'regenerator-runtime/runtime'; 复制代码
解决办法三：

在 vue.config.js 里增加如下代码：

configureWebpack: config => {config.entry.app = ["babel-polyfill", "./src/main.js"];  }, 复制代码

景象二：第三方插件引入导致

因为我的项目应用了长连贯库 socket.io-client 和 vue-socket.io-extended，在 main.js 是中应用办法是：

import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket); 复制代码

我把这四行代码正文掉之后神奇的 IE 不白屏了，但业务须要 IE11 是不能放弃长连贯的，通过尝试发现是 socket.io-client 这个插件在应用 import 引入时导致的问题。

解决办法一：

1、将 main.js 调整为：

import VueSocketIOExt from 'vue-socket.io-extended';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket); 复制代码

2、socket.io-client 改为在 public/index.html 文件 head 中引入：

<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script> 复制代码
解决办法二：

保留 main.js 对第三方插件的引入不变，只须要在 vue.config.js 的 transpileDependencies 增加要显示依赖的插件即可：

transpileDependencies:['socket.io-client'],
// transpileDependencies:['*'], 复制代码

transpileDependencies 的作用是：默认状况下 babel-loader 会疏忽所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，能够在这个选项中列出来。

景象三：本地环境失常，但生产环境仍旧白屏

发现引入一个多语言文件时，JSON 没有应用适合的逗号导致，如下：

当我我第 8 行的逗号去掉后，奇观般失常了。
另外，如果前端工程引入的文件不在工程的根目录下，也会呈现这种状况。

退出移动版