Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘-阿里云开发者社区

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

2022-10-03 66

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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"
  ]

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

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

点击控制台报错的地方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网上很多文章都是说这个的，可以参看:

参考

            </div>