vue-cli3 兼容ie11 提示 SCRIPT1002: 语法错误

最新推荐文章于 2024-03-25 09:09:01 发布

原创最新推荐文章于 2024-03-25 09:09:01 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何解决Vue CLI3项目在IE11浏览器上出现的SCRIPT1002语法错误问题。通过安装并配置@babel/polyfill，调整webpack及babel配置，确保项目能在IE11上正常运行。

vue-cli3 兼容ie11; 提示 SCRIPT1002: 语法错误

我下载了 @babel/polyfill ; babel-polyfill
在vue.config.js 的 module.exports : {} 中添加

  configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; },
  transpileDependencies: [
    /[/\\]node_modules[/\\]test[/\\]/,
    /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/
  ],

在main.js 上面引入

import 'babel-polyfill'
import '@babel/polyfill'

在babel.config.js中

presets: [
 ["@vue/app", {
   useBuiltIns : "entry"
 }]
],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TO_WebNow

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误

Mr.小灰狼_随笔

12-24

1万+

整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误 这篇文章主要介绍了 Vue项目在 IE 浏览器显示白屏并报错 SCRIPT1002: 语法错误 的案例。目录一、关于 sockjs-client 依赖包二、关于 highlight 依赖包三、关于 swiper 依赖包四、IE 不支持 ES6 语法五、第三方插件引入导致六、本地环境正常，生产环境仍旧白屏

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)

weixin_41888177的博客

12-21

8118

vue-cli4.x默认情况下不需要自己手动安装babel-polyfill,我们看一下官网介绍。我们可以发现，与umi2.x之后一样，vue也支持一键配置需要兼容的浏览器我们只需要在package.json中添加自己需要的浏览器即可。具体的指定范围请点击这里。但是仅仅这样还是不够的虽然正常情况下这样就可以直接兼容，但是官方也做过说明有很多开发人员会遇到安装了bab...

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

Peom1 2021.06.08
你这是写了个寂寞，没卵用

VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

10-14

主要介绍了VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue在IE11版本上的问题

04-21

解决vue在IE11版本报错情况，vuex requires a Promise polyfill in this browser.需要下载babel-polyfill，在main.js中 import 'babel-polyfill'，修改webpack.config.js中的入口文件。ie11打不开vue项目，报错 “对象不支持“addEventListener”属性或方法”。

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

weixin_31980019的博客

07-19

627

问题景象我的项目应用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()蕴含的代码...

cli3解决 ie11语法错误 vue_VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

weixin_36448245的博客

01-26

2471

问题现象项目使用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()包含的代码中有ES...

vuecli3 项目在 ie11 下面白屏报错：SCRIPT1002: 语法错误

学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等

03-15

1138

SockJS是一个浏览器JavaScript库，提供类似WebSocket的对象。SockJS为您提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域的通信通道。如果失败，它可以使用各种特定于浏览器的传输协议，并通过类似WebSocket的抽象来呈现它们。安装好之后最后记得清除一下 ie11 浏览器的缓存，不要像我一样，安装好后排查了半天，最后发现是缓存问题，ie 浏览器还是用的。然后定位的位置如下：说明。这个库的版本目前使用的是。

SCRIPT1002: 语法错误 app.js (9038,3)

weixin_40667613的博客

07-25

8566

前言： vue项目在ie和360ie模式下报错尝试： / ** * 网上没有详细步骤：因此百度了一大堆解决方法，以下是能够解决此问题的步骤 */ 1.兼容IE9/IE10可能会遇到语法或者 Promise错误，安装 babel-polyfill npm install babel-polyfill 2.在页面入口配置main.js中引入 babel-polyfill im...

VUE-CLI3项目在IE不兼容报错 SCRIPT1002: 语法错误的解决

qq_43429002的博客

05-06

1303

安装插件 babel-polyfill npm install --save-dev babel-polyfill 然后在babel.config.js修改presets，内容如下： presets: [["@vue/app", {useBuiltIns: "entry",}]], main.js中顶部引入插件babel-polyfill import "babel-polyfill"; 注意：不行的话需要在vue.config.js里添加transpileDependencies要显示依.

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第一节）

java小白翻身

11-21

1939

###序前一段时间有很多朋友来问我各种问题，比如java怎么学，c，c++，c#，java，还有php等等，到底学哪个好，哪个好就业？其中不乏刚毕业找不到工作的学生，我对此也是很有感触，回想当初那最最艰难的日子，我的确很了解这种焦急的心态。其实我个人感觉，编程语言都大同小异，无非是语法变一变，当然，如果你为了快速上手，我还是优先推荐java。最近琢磨着要写点东西，把基本的Java Web开发流程完整地走一遍，最后决定，干脆就写一个小小的项目实战吧。这个小项目作为一个JavaWeb的入门例子，从前台页面.

Vue进阶（幺柒零）项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨

IT全栈华强工作室

10-26

2688

Vue项目改造升级后，原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误的提示信息。经过代码排查，发现项目中新引入了一些依赖包导致系统无法正常启动。出现以上错误，可从以下几个方面查找原因：可能与IE的某些插件冲突。把所有无关的IE加载项全部禁用后尝试；引用了不存在的 js 文件；页面的某些文件在文档模型还没建立时就已经开始引用相关的节点；令人感到疑惑的是：其他原本可以本地IE热部署的项目在进行同样的升级改造后，依旧可以实现本地IE部署，且没有任何错误信息。

解决 cli3 自定义指令在ie11报错 SCRIPT1002: 语法错误

lllomh的博客

08-02

6913

在vue 中使用的 directive 命令的时候。在其他浏览器可以使用但打包之后在ie11 就报错如下其实这个因为directive 命令要在 new vue 实例之前创建，如果在 new vue 里面就会报错比如这种方法就是在 new vue 之前用 Vue.directive('test-button', {}）就就可以了。 ...

vue项目在IE9/10中报错SCRIPT1002: 语法错误

wjx25zj的博客

02-10

1959

最近手撸vue ie10 ie9下报错SCRIPT1002: 语法错误 npm uninstall webpack-dev-server npm install webpack-dev-server@2.6.1 --save-dev 实测可用

vue项目在ie浏览器报SCRIPT1002:语法错误chunk-vendors.1672709351402.js (264647,23)

M_yI_Hg的博客

01-03

1340

解决. 安装node10版本, npm6版本, 重新安装依赖。总结: 其实就是ie11不支持es6的语法.

vue cli 项目在IE9/10中报错SCRIPT1002: 语法错误[解决步骤]

最新发布

03-25

<think>好的，我现在需要解决用户在Vue CLI 3.x项目中遇到的IE浏览器SCRIPT1002语法错误问题。首先，我得理解这个错误的原因。根据引用[3]，错误信息提到vuex需要Promise的polyfill，这说明IE不支持ES6的Promise等新特性。IE11确实不支持ES6语法，所以需要polyfill来填补这些缺失的功能。接下来，用户已经提供了一些引用资料，我需要结合这些来解决。引用[1]提到了引入es6-promise.auto.min.js和babel-polyfill.min.js，但用户现在用的是Vue CLI 3，可能需要更现代的配置方法。引用[2]和[3]都提到了安装babel-polyfill，并在babel.config.js中配置presets，以及在main.js顶部引入。这些都是关键步骤。首先，安装babel-polyfill是必要的，因为它是用来提供ES6+功能的polyfill。不过现在可能更推荐使用core-js，因为Babel 7.4之后babel-polyfill已被弃用。不过用户提供的引用里用的是babel-polyfill，所以可能需要按照他们的步骤来。然后，配置Babel。在Vue CLI 3中，babel.config.js中的presets需要设置useBuiltIns为"entry"，这样可以根据目标浏览器自动引入需要的polyfill。同时，在main.js顶部引入babel-polyfill确保它最先加载。另外，可能需要设置browserslist来指定兼容的浏览器，比如IE 11。在package.json或.browserslistrc文件中配置，确保构建时包含必要的转换和polyfill。还需要检查vue.config.js是否有transpileDependencies配置，确保依赖包也被正确转译。有些第三方库可能没有转译ES6代码，导致IE报错。最后，用户可能还需要在public/index.html中添加meta标签，确保使用兼容模式。比如设置X-UA-Compatible为IE=edge。可能需要分步骤来，先安装依赖，配置babel，调整main.js，设置browserslist，处理vue.config.js，最后测试构建后的应用是否在IE中正常运行。同时要注意polyfill的引入顺序，确保在应用代码之前加载。</think>### 分步解决方案 #### 1. 安装必要依赖首先需要安装`babel-polyfill`和`core-js`提供ES6+语法兼容性： ```bash npm install --save-dev babel-polyfill core-js ``` #### 2. 配置Babel转译规则在项目根目录的`babel.config.js`中修改presets配置： ```javascript module.exports = { presets: [ ["@vue/cli-plugin-babel/preset", { useBuiltIns: "entry", // 按需注入polyfill corejs: 3 // 指定core-js版本 }] ] } ``` #### 3. 在入口文件引入polyfill 在`src/main.js`文件的最顶部添加： ```javascript import "core-js/stable"; import "regenerator-runtime/runtime"; ``` #### 4. 配置浏览器兼容性在`package.json`或`.browserslistrc`中指定兼容IE11： ```json // package.json "browserslist": [ "> 1%", "last 2 versions", "not dead", "IE 11" ] ``` #### 5. 检查构建配置在`vue.config.js`中确保转译依赖： ```javascript module.exports = { transpileDependencies: [ // 需要转译的依赖包名称 ] } ``` #### 6. HTML兼容模式设置在`public/index.html`中添加： ```html <meta http-equiv="X-UA-Compatible" content="IE=edge"> ``` ### 关键配置原理 1. **useBuiltIns: "entry"** 会基于目标浏览器自动引入所需polyfill[^2] 2. **core-js 3** 提供完整的ES6+环境支持 3. **browserslist** 配置决定Babel转译和polyfill注入范围[^1]