1. 第一步:安装babel-ployfill (已安装请跳过此步骤)

      yarn add babel-ployfill
  2. 修改webpack打包配置文件:webpack.bash.conf.js

      // 引入babel-ployfill
    var babelPloyfill = require('babel-ployfill') // ...
    // 修改entry字段
    entry: {
    // app: './src/main.js'
    app: ["babel-polyfill", "./src/main.js"]
    },
  3. 重新运行,v-loading等问题完美解决, 原因可能是v-loading是调用的ES6的Object的setter和getter方法来实现的,babel-ployfill报错,未能将ES6的方法完全转换为IE9支持的ES5方法

IE9样式错乱

  • 可能的原因1,element-ui 中使用了 display: flex; 样式,IE9不支持次样式,解决方法为,排查下各组件,避免使用带 display: flex; 的组件
  • 可能的原因2,IE9浏览器过于老旧,单文件最大行数超过一定限制将不再读取后边的内容,因此可以尝试分割css文件和打包的js文件

    1. 分割js文件,最好的方法是采用vue的路由懒加载,这样打包时,vue-loader会把每个路由对应的js文件打包在一起。同时注意组件的合理划分,避免单组件体积过大,并提高组件的复用性
    2. 分割css文件,通过yarn add css-split-webpack-plugin -D安装css-split-webpack-plugin包来分割组件,修改webpack.prod.conf.js文件 
        // 引入依赖
      var CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default // 在css打包插件后面新增css分割插件
      new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
      }),
      // 新增的css分割插件
      new CSSSplitWebpackPlugin({
      size: 4000,
      filename: utils.assetsPath('css/[name]-[part].[ext]')
      }),

IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现”polyfill-eventsource added missing EventSource to window”的奇怪问题(ie所有版本都有出现)的更多相关文章

  1. Windows系统盘符错乱导致桌面无法加载。

    问题如下 : 同事有台笔记本更换SSD硬盘,IT职员帮他将新硬盘分好区后再将系统完整Ghost过来,然后装到笔记本上.理论上直接就可以使用了!但结果开机后登陆用户桌面无法显示,屏幕黑屏什么都没有. 问 ...

  2. 在IIS上新发布的网站,样式与js资源文件加载不到(资源文件和网页同一个域名下)

    在IIS上新发布的网站,网站能打开,但样式与js资源文件加载不到(资源文件和网页是同一个域名下,例如:网页www.xxx.com/index.aspx,图片www.xxx.com/pic.png). ...

  3. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  4. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  5. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

  6. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  7. cocos2d-x游戏开发(十五)游戏加载动画loading界面

    个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...

  8. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要有三种实现方式 ...

随机推荐

  1. JQuery ajax的使用

    JQuery 真的是好东西       $.ajax({         type: "post",         url: "/DataCheck",   ...

  2. ADO.NET基础学习 一(连接数据库)

    (记录下方便自己复习) 概念 简单地理解为用来连接数据库的类. 工作流程 ①Connection对象用来连接数据库. 两种连接方式:Windows身份验证 / sqlserver验证 private ...

  3. 如何调用common.js

    第一步 页面需要引用此js 第二步 var loginJs = { //登录 goLogin: function () { var _userinfo = { name: "夏小沫" ...

  4. vue elementUI enter 回车 (转载)

    表单提交时需要处理输入框的回车事件 一.vue原生 原生input标签可以用@keyup.enter="onSubmit" 如:<input v-on:keyup.enter ...

  5. MyBatis学习笔记(二) Executor

    一.概述 当我们打开一个SqlSession的时候,我们就完成了操作数据库的第一步,那MyBatis是如何执行Sql的呢?其实MyBatis的增删改查都是通过Executor执行的,Executor和 ...

  6. wepy框架须知

    安装脚手架 . 安装构件工具 npm i wepy-cli -g .创建项目 wepy new 项目名 .实时编译 wepy build --watch 或 npm run dev .使用微信开发者工 ...

  7. C# 任务 数据加载不影响其他操作

    private void button1_Click(object sender, EventArgs e) { //this.timer1.Enabled = true; Task t1 = new ...

  8. react-conponent-todo

    <!DOCTYPE html> <html> <head> <script src="../../build/react.js">& ...

  9. Atom插件安装及推荐

    简介(了解更多去google或baidu) Atom 代码编辑器支持 Windows.Mac.Linux 三大桌面平台,完全免费,并且已经在 GitHub 上开放了全部的源代码.在经过一段长时间的迭代 ...

  10. pyinstaller使用错误 SyntaxError: Non-UTF-8 code starting with '\xb4' in file C:......

    注:我的博客原本在CSDN,现转到博客园,图片采用以前的图片,并没有盗图.​​ 在将.py文件打包时,出现了下列错误 >>C:\Users\小呆\PycharmProjects\pycha ...