Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘

2024-05-08 21:49:56

一、问题描述

Vue CLI3打包上线后的代码使用IE11打开后是空白的，控制台报错：

SCRIPT1003: 缺少 ':'
app.js (304501,83045)

其他浏览器打开没问题，问题定位在：存在不兼容IE的代码

二、问题分析

首先要知道，IE不支持函数简写

data(){return {}
}

只能识别这种形式

 data: function () {return {}
}

还有其他的不兼容之处，最笨的办法是手动修改所有不兼容的地方

当然还有更优的解

看下配置文件package.json中设置的兼容浏览器配置

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

查询一下配置所代表的的浏览器, 可以发现IE10和IE11都在其列，

所以，项目本身的代码应该是没问题的

https://browserl.ist/

点击控制台报错的地方app.js，发现是一个模块不支持IE导致的

三、问题处理

最简单的方式是将不兼容的第三方模块换掉，如果确实需要那此法不可行

另外一个方式是使用@babel/polyfill + babel.config.js配置

1、安装依赖

cnpm i @babel/polyfill -S

2、入口文件 main.js 引入依赖

import '@babel/polyfill';

3、修改 babel.config.js

module.exports = {presets: [['@vue/app',{useBuiltIns: 'entry'}]],
};

4、修改 vue.config.js

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

依赖较多，索性将所有的依赖都加上，不过会增加打包后的体积,比如我的项目从7.5M增加到了19.6M

module.exports = {transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
}

另外，如果是babel-polyfill + webpack.config.js网上很多文章都是说这个的，可以参看:

https://github.com/PanJiaChen/vue-element-admin/wiki

参考

Vue CLI浏览器兼容性

Vue CLI 3 配置兼容IE10

vue cli3 创建的项目在IE11中运行，出现白屏，通过console调试发现报错SCRIPT1003: 缺少 ':'文件: app.js，行: 7391，列: 3 #4131

Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘相关推荐

Vue项目下IE报错 SCRIPT1003: 缺少 ‘:‘，导致页面空白的解决方案
❝ 今年年初加入了物资团队,遇到的第一个问题就是解决IE的兼容性问题. ❞ 1 现象当时的情况是IE浏览器在登录系统时,登录页无法加载,页面显示空白,所以也无法访问系统里的其他页面. 2 查看报错 ...
vue2打包兼容ie11白屏报错问题汇总
vue2打包兼容ie11问题汇总下载 babel-polyfill npm install --save-dev babel-polyfill main.js中引入 import "bab ...
兼容IE系统，报错SCRIPT1006: 缺少 ‘)‘
系统使用IE系统打开报错截图: 第一步:使用npm安装babel-polyfill 依赖 npm install --sava babel-polyfill npm install --sava ba ...
vue打包后有es6语法兼容问题，ie报错
vue打包后有es6语法兼容问题,ie报错 (个人学习笔记,仅供参考): 情景:ie/360浏览器打开build之后的页面报错了,点击报错定位的时候发现有"const"和箭头函数语 ...
ie11命令栏里打开页面设置报错“错误13 对象不支持“showPageSetupDialog属性或方法””
ie11命令栏里打开页面设置报错"错误13 对象不支持"showPageSetupDialog属性或方法"" 设置一下默认打印机,恢复正常.(原来是window ...
webview在android8.0,解决Android8.0系统应用打开webView报错
由于webView存在安全漏洞,谷歌从5.1开始全面禁止系统应用使用webview,使用会导致应用崩溃错误提示:Caused by: java.lang.UnsupportedOperationExc ...
修复Unity空白报错问题
修复Unity空白报错问题在升级Unity Hub之后,偶然发现Console里有几行空白的报错,看不到任何信息,由于有报错,导致修改代码无法生效.尝试重启项目,重装Unity都完全没效果.而且就算 ...
[Android]打开eclipse报错：发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。...
[错误] 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\android-sdks\system- ...
eclipse mat 分析dump文件,打开文件报错,out of memeory
eclipse mat 分析dump文件,打开文件报错,out of memeory 解决: 1.打开eclipse报out of memeory通用 window-->Preferences- ...

最新文章

热门文章