首页 > 其他分享 >Vue.js项目在IE11白屏报错

Vue.js项目在IE11白屏报错

时间:2023-06-29 13:34:12浏览次数:43  
标签:vue babel js Vue 报错 polyfill import config


一、概述

项目使用vue/cli4脚手架搭建的前端项目,vue版本为2.6.10。
但开发环境的IE11打开显示白屏,F12打开显示:

Vue.js项目在IE11白屏报错_javascript

查明报错原因是: I.E.不支持ES6语法。

二、解决方案

(一)解决方案1

1、安装如下的依赖包:

npm install --save-dev babel-polyfill 或 npm install --save @babel-polyfill

2、main.js的第一行引入:

/*记住一定是首行代码*/
import 'babel-polyfill' 或 import '@babel-polyfill'

3、然后在babel.config.js修改presets,内容如下:

// presets: [['@vue/app', {useBuiltIns: 'entry',}]], // 此为vue/cli3。
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry',}]], // 此为vue/cli4。

(二)解决方案2

1、vue cli官方推荐使用,前提是package.json安装了core-js或者安装:

npm install --save core-js regenerator-runtime

2、其次在main.js首行引入:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

(三)解决方案3

在vue.config.js里添加如下代码:

configureWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js'];},

(四)sockjs-client

还有一种情况是在i.e.打开报错显示的sockjs-client错误,如下所示:

Vue.js项目在IE11白屏报错_javascript_02

遇到上述的错误,降低sockjs-client的版本,请特别留意依赖描述在package-lock.json里面,也需要降低版本。将版本降低为1.5.1,执行命令:

npm i [email protected] -D

更新版本完成后在,重新编译项目,就可以解决上述问题。 
留意观察上面出错的截图信息,注释中其实是可以看到具体是哪个包出现了错误,这一点非常有利于具体的定位问题,排查问题。

(五)其他情况

如果上述方法还是没有解决你们的问题,那就有可能是你们使用了第三方包,因为vue编译默认是不编译第三方包的(node_modules), 此时目标明确,就好解决问题了,在你的vue.config.js文件中添加配置:

transpileDependencies: [
    '包名或使用正则匹配',
    ...
  ]


标签:vue,babel,js,Vue,报错,polyfill,import,config
From: https://blog.51cto.com/u_3319687/6581512

相关文章

  • 01 pixi.js入门
    写在前面:写该笔记时pixi.js版本为V7.2.41.安装npminstallpixi.js或者<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>又或者<scriptsrc="https://unpkg.com/[email protected]/dist/pixi.min.js"><......
  • package-lock.json锁定镜像地址404的处理方法
    前言最近接触了一个新的vue项目,安装依赖是一直无法安装成功,有部分依赖包的地址报404,查看package-lock.json,发现其中部分依赖使用了公司私有的镜像库,但是目前该镜像库已关闭,访问该包地址返回404.解决方案如下1、删除package-lock.json,重新npmi生成新的package-lock.json2、先卸......
  • 教你如何用Vue3搭配Spring Framework
    摘要:在本文中,我们将介绍如何使用Vue3和SpringFramework进行开发,并创建一个简单的TodoList应用程序。本文分享自华为云社区《Vue3搭配SpringFramework开发【Vue3应用程序实战】》,作者:黎燃。一、介绍Vue3和SpringFramework都是现代Web应用程序开发中最流行的框架之一。Vue3是一个......
  • appium报错AttributeError: 'WebDriver' object has no attribute 'find_element_by_i
    解决方法:fromappium.webdriver.common.appiumbyimportAppiumBy#导入AppiumBysearch=driver.find_element(AppiumBy.ID,"com.android.settings:id/search")#编写格式:driver.find_element(by=AppiumBy.ACCESSIBILITY_ID,value='accessibility_id')思考流程:......
  • 使用vue cli 5.0 在vscode中运行vue命令报错
       1、运行 vue--version  报错  2、在cmd命令行执行 vue--version 正常  3、在终端中输入  get-ExecutionPolicy,查看当前权限  4、执行 set-executionpolicyremotesigned  命令设置为可用模式,但是报错  5、使用管理员打开powe......
  • NodeJS系列(6)- ECMAScript 6 (ES6) 语法(四)
    本文在“NodeJS系列(2)-NPM项目Import/ExportES6模块”的npmdemo项目的基础上,继续介绍并演示Promise对象、Generator函数、async函数等ES6语法和概念。NodeJSES6:https://nodejs.org/en/docs/es6ECMA:https://www.ecma-international.org/publications-and-standard......
  • js的Set数据类型
    在js中,Set和Map相比,也有一组key的集合,但不存储value。由于key不能重复,所以,在Set中没有重复的key。因此,set使用的场景在于,可以提供一组没有重复元素的集合。Set构造要构造一个Set对象,需提供一个Array作为输入,或者直接构造一个空Set,如:varset=newSet(["beijing","shanghai"......
  • js对时间的操作(秒数转化为时分秒)
    介绍:最近在写项目的时候遇到后台返回的时间是1300秒,考虑到页面展示效果不佳,想到直接改成时分秒的样式,代码如下://秒数转化为时分秒formatSeconds(value){varsecondTime=parseInt(value);//秒varminuteTime=0;//分varhourTime=0;//......
  • 图书商城项目练习①管理后台Vue2/ElementUI
    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理后台、商城网站、小程序/App,分......
  • vue列表页返回数组错误Invalid prop: type check failed for prop "data". Expected A
    一个vue列表页接收后端数组时是这样写的:this.list=response.data返回如下错误:Invalidprop:typecheckfailedforprop"data".ExpectedArray,gotObject意思是希望返回一个数组但实际得到一个对象Object,网上大多是初始化userList=[]或userList=null解决的,但......