700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘

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

时间:2020-09-21 15:06:56

相关推荐

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

一、问题描述

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

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

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

二、问题分析

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

data(){return {}}

只能识别这种形式

data: function () {return {}}

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

当然还有更优的解

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

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

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

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

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网上很多文章都是说这个的,可以参看:

/PanJiaChen/vue-element-admin/wiki

参考

Vue CLI浏览器兼容性Vue CLI 3 配置兼容IE10vue cli3 创建的项目在IE11中运行,出现白屏,通过console调试发现报错SCRIPT1003: 缺少 ':'文件: app.js,行: 7391,列: 3 #4131

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。