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

问题现象

项目使用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行的逗号去掉后，奇迹般正常了。
另外，如果前端工程引入的文件不在工程的根目录下，也会出现这种情况。

到此这篇关于VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决的文章就介绍到这了,更多相关VUE IE11白屏报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

    最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题.分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了. 低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错.但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了.突然发现万恶的 IE 还是有点用的- 网上的文章大部分是 Vue-cli 2.x

  • 详解一次Vue低版本安卓白屏问题的解决过程

    详解一次Vue低版本安卓白屏问题的解决过程

    因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用babel转换部分ES6语法. Babel 转换 Promise 和 Symbol ES6语法的配置 # 两项都需要放到生产依赖 npm install babel-polyfill --save npm install es6-promise --save // main.js import 'babel-polyfill'; import Es6Promise from 'es6-promise

  • 详解vue 项目白屏解决方案

    在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的.在某次更新功能代码后,被反馈在一些手机上会出现白屏.经过一番探索,多管齐下解决了问题 白屏可能的原因: es6 代码没有被编译成 es5 : 文件打包路径错误: 运营商塞入的广告 js 服务器报错,连累项目不能下载资源: 针对 1 和 2 ,分别采取以下做法: 解决位置:config/index.js 文件:把 assetsPublicPath: '/' 改为assetsPublicPath: './' build: {

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • 关于vue-cli3打包代码后白屏的解决方案

    前言 : 最近使用了vue-cli3.0 开发了一个移动网页端项目,准备打包发布了.按照以往的流程 npm run build 问题来了 打开 dist index.html 文件发现白屏.打开调试后 发现文件引用路径不对 根据以往的经验 根目录下新建 vue.config.js 配置 publicPath module.exports = { ... runtimeCompiler: true, publicPath: './' ... } 满心欢喜的打开,结果还是白屏.打开调试发现文件路径是

  • 解决vue build打包之后首页白屏的问题

    1.问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏.有很多js,css无法加载. 2.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子. 再次执行 npm run build 就可以了. 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue2.0使用过

  • 如何解决vue2.0下IE浏览器白屏问题

    如何解决vue2.0下IE浏览器白屏问题

    公司新开发的项目需要兼容到IE9+ 就在index.html页面加入 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 不起作用 总结方法: 1.兼容IE9/IE10可能会遇到语法或者 Promise错误,安装 babel-polyfill npm install babel-polyfill 2.在页面入口配置main.js中引入 babel-polyfill import("babe

  • Vue防止白屏添加首屏动画的实例

    单页应用有个无法避免的问题就是首屏加载慢,虽然可以通过gzip.路由懒加载.CDN.提高服务器带宽等手段,首屏加载速度仍然比传统多页应用慢一些. 为了提高用户体验,首屏添加loading动画很有必要,并且实现特别简单. vue-cli3生成的项目中,打开index.html会发现如下代码 <body> <noscript> <strong>We're sorry but doesn't work properly without JavaScript enabled.

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

    问题现象 项目使用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不支持,查了网上很多资料

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

  • vue项目中Eslint校验代码报错的解决方案

    vue项目中Eslint校验代码报错的解决方案

    目录 vue Eslint校验代码报错 1.空格缩进,不让使用tab 2.未使用的变量报错 3.分号和引号问题 vue使用Eslint报错 解决办法很简单 vue Eslint校验代码报错 在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的. 它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不

  • 在vue项目中使用axios发送post请求出现400错误的解决

    目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的

  • 解决vue项目,npm run build后,报路径错的问题

    在build目录下的webpack.prod.conf.js里面: output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码,可解决该问题或者publicPath: "./",也可解决 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[

  • 解决vue页面刷新产生白屏的问题

    目录 vue页面刷新产生白屏 vue页面白屏的原因及优化 一.原因 二.解决办法 vue页面刷新产生白屏 app.vue <template>   <div id="app">     <router-view v-if="isRouterAlive"></router-view>   </div> </template> <script> export default {   pr

  • vue项目兼容ie11的实现方法

    vue项目兼容ie11的实现方法

    目录 前情提要 经过(一) 经过(二) 经过(三) 经过(四) 最后 附加 总结 前情提要 事情的起因是项目在设计之初要求兼容IE11,也在开发之初对此做了处理,但在经过两年的多的迭代后,经过大几十个人的手之后,该项目被引入了大量的插件,又由于不经常使用IE浏览器导致不知道什么时候项目就已经不兼容IE11了.但是领导是使用IE浏览器的,突然哪天翻看项目网页的时候,打不开了.于是从上头被骂了,我们被要求将手上所有的项目都对IE11以及其他市面上的浏览器做兼容处理. 经过(一) 对于Chrome浏览

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • 详解vue-cli项目在IE浏览器打开报错解决方法

    详解vue-cli项目在IE浏览器打开报错解决方法

    首先要知道VUE官网已表明仅支持IE8以上版本(不包括IE8),css弹性布局flex各浏览器支持如下: 假如项目用到弹性布局,则项目仅支持IE10以上版本. 另外兼容其他低版本的,请另寻它法. 网上说的本人试了都是没用的,下面是亲自试验的解决方法. 1. 问题 :ie浏览器打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser; 解决方法: 安装babel-polyfill npm install babel-po

  • vue项目中使用骨架屏的方法

    vue项目中使用骨架屏的方法

    现在的应用开发,基本上都是前后端分离的,前端主流框架有SPA.MPA等,那么解决页面渲染.白屏时间成为首要关注的点 webpack可以按需加载,减小首屏需要加载代码的体积: 使用CDN技术.静态代码等缓存技术,可以减小加载渲染的时长 问题:但是首页依然存在加载.渲染等待时长的问题.那么如何从视觉效果上减小首屏白屏的时间呢? 骨架屏:举个例子:其实就是在模版文件中id=app容器下面写想要展示的效果,在new Vue(option)之后,该id下的内容就被替换了( 这时候,可能Vue编译生成的内容

随机推荐