精华内容
下载资源
问答
  • Vue项目兼容IE11

    千次阅读 2021-01-22 17:00:02
    使用的是vue-typescript-admin-template项目vue-cli3脚手架搭建)进行改造的,但在IE11下面出现各种语法错误,下面将解决方法记录下来,供大家参考。 下面是错误截图: 语法错误: Promise 错误 polyfill ...

    使用的是vue-typescript-admin-template项目(vue-cli3脚手架搭建)进行改造的,但在IE11下面出现各种语法错误,下面将解决方法记录下来,供大家参考。

    下面是错误截图:

    语法错误:

    Promise 错误

    polyfill

    默认的Vue CLI项目会使用@vue/babel-preset-app,它通过@bable/preset-env和browserslist配置来决定项目需要的polyfill。

    默认情况下,它会把useBuiltIns: 'usage' 传递给@bable/preset-env,这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而,这也意味着如果其中一个依赖需要特殊的 polyfill,默认情况下 Babel 无法将其检测出来。

    直接照Vue CLi浏览器兼容性中上解决方法:

    第一步:在babel的相关配置文件(babel.config.js、.babelrc 或package.json 的babel字段任意一个)中, 增加

    "useBuiltIns": "entry"

    注:babel7版本以后,会有差异 (https://babeljs.io/docs/en/babel-polyfill/)

    下面我们配置.babelrc文件:

    {
        "presets": [
          [
            "@babel/preset-env",
            {
              "useBuiltIns": "entry"
            }
          ]
        ]
      }

    第二步: 安装'@babel/polyfill',并在入口文件main.js中引入

    npm install --save @babel/polyfill

    引入的话官网推荐使用:

    import "core-js/stable";
    import "regenerator-runtime/runtime";

    最后重新启动项目,应该可以解决IE11问题。

    如果还是不行可以在vue.config.js中配置transpileDependencies,默认情况下babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在 transpileDependencies 选项中列出来。

    如果项目中使用了CSS var(), IE11是不兼容的,我们可以使用css-vars-ponyfill

    npm install --save css-vars-ponyfill

    在main.js中引入即可:

    import cssVars from 'css-vars-ponyfill'
    cssVars({})

     

    参考资料:

    https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage

    https://zhuanlan.zhihu.com/p/103907934

     

    展开全文
  • vue项目兼容IE浏览器

    万次阅读 热门讨论 2018-08-17 11:04:56
    vue项目兼容IE浏览器 利用vue写出的项目打包后在IE浏览器下显示空白,是因为缺少babel-polyfill的缘故。 解决方法: 1、安装babel-polyfill包; 2、在main.js文件中引入babel-polyfill; 3、在...

    vue项目兼容IE浏览器

    利用vue-cli脚手架搭建的项目打包后在chrome下正常显示,IE浏览器下显示空白,这是因为缺少babel-polyfill处理器的缘故。

    vue-cli脚手架构建的项目结构:

    这里写图片描述

    解决方法:

    1、安装babel-polyfill包;

    npm install babel-polyfill --save-dev

    安装完之后,在package.json文件中显示:

    这里写图片描述

    2、在main.js文件中引入babel-polyfill

    这里写图片描述

    3、在webpack.base.config.js中将entry中的app: './src/main.js'配置改为:app: ['babel-polyfill', './src/main.js']

    这里写图片描述

    这样配置之后,重新打包上传,就可以在IE浏览器下正常显示了。

    参考文献

    [1] vue在IE中不兼容
    [2] vue在IE11下不兼容 页面显示空白的问题
    [3] vue2.0在IE11无法打开的解决办法

    展开全文
  • Vue项目兼容IE浏览器

    千次阅读 2019-06-06 18:40:08
    vue项目ie11下一片空白并报Symbol 未定义的错,还有其他一些es6-10中出现的新的语法不兼容的问题(遇见这种问题头疼的不行,但毕竟拿着工资呢) 2.原因 ie10浏览器解析不了es6的语法,需要我们使用babel(Babel...

    1.问题

    vue项目在ie11下一片空白并报Symbol 未定义的错,还有其他一些es6-10中出现的新的语法不兼容的问题(遇见这种问题头疼的不行,但毕竟拿着工资呢)

    2.原因

    ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript)。但是Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。

    3.解决方案

        1.在vue项目中安装babel-polyfill

           polyfill指的是“用于实现浏览器不支持原生功能的代码”,比如,现代浏览器应该支持fetch函数,对于不支持的浏览器,网页中引入对应fetch的polyfill后,polyfill就给全局的window对象上增加一个fetch函数,让这个网页中的JavaScript可以直接使用fetch函数了,就好像浏览器本来就支持fetch一样。    

    npm install --save-dev babel-polyfill


       2.在mian.js中引入babel-polyfill(要在引入vue,vuex,elementui 之前引入

       import 'babel-polyfill';
       重启项目,正常显示啦!

    展开全文
  • vue-cli 兼容ievue项目兼容ie9.ie11

    千次阅读 2019-01-04 20:52:17
    1、首先 npm install --save babel-polyfill 2、然后在main.js中的最前面引入babel-polyfill import 'babel-polyfill' 3、在index.html 加入以下代码(非必须) ...IE=edge,chrome=1"> ...

    1、首先

    npm install --save babel-polyfill

    2、然后在main.js中的最前面引入babel-polyfill

    import 'babel-polyfill'

    3、在index.html 加入以下代码(非必须)

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    4、在config中的webpack.base.conf.js中,修改编译配置

    entry:{
        app:['babel-polyfill','./src/main.js']      
    }

    5、当然,如果你只用到了 axios 对 promise进行兼容,可以只用 es6-promise

    npm install es6-promise --save

    6、在 main.js 中的最前面 引入

    import 'es6-promise/auto'

    项目使用element

    用 bable 来解析 element-ui, 要完成此操作只需要修改前端文件夹下的build/webpack.base.conf.js 文件即可

    {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')]
          }
    

    最后,再依赖一个插件解决ES6/ES7高级语法兼容
     

    npm install --save-dev babel-preset-es2015-ie

     

    展开全文
  • vue项目兼容IE11

    千次阅读 2018-12-11 16:39:10
    1、npm安装babel-polyfill npm install babel-polyfill --save-dev 2、在入口文件main.js中引入 import 'babel-polyfill' 3、在webpack.config.js配置文件中做...4.重启项目,清除浏览器缓存后打开网页
  • 主要介绍了Vue兼容ie9的问题全面解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue项目兼容IE(通用)

    千次阅读 2018-12-29 11:00:14
    安装babel-polyfill yarn add babel-polyfill --save src/main.js 引入babel-polyfill import '@babel/polyfill 在根目录增加babel.config.js文件 ...module.exports = { ... ['@vue/app', { useBuiltIn...
  • 而不兼容ie的情况下,情况稍微好点的就是样式错乱、某些功能无法正常使用,严重的直接导致整个项目都一片空白。(本人就是严重的那种) 二、步骤 本人项目在ie中一片空白,虽然ie不兼容es6,但并不是页面空白主要...
  • 主要用babel这个js,可以去这个网址下载 https://github.com/babel/babel-standalone/releases  按照正常得引用方式引用即可 另外还需要修改script标签的type类型 通过这2步就可以兼容ie了,不过vue只能兼容ie9+
  • vue项目兼容ie浏览器

    2021-05-07 14:43:01
    vue兼容ie8以上版本; IE 不兼容 axios的promiss对象; IE 不兼容es6语法; ES6转ES5 一、关于babel-polyfill 1、说明:This will emulate a full ES2015+ environment and is intended to be used in an ...
  • vue项目兼容ie9 10不显示问题

    千次阅读 2018-08-15 15:28:16
    因为工作原因,让我来解决整体网站的兼容问题。网站使用的框架是vue+iview。 话不多说,直接说问题吧。下面记录一下我的经历: 问题一:一开始整个网站在360极速模式及ie浏览器直接不显示,一片空白 解决方式是...
  • Vue项目兼容IE/360方法

    千次阅读 2019-04-02 11:44:13
    如果浏览器版本高,但是你的Vue项目的页面在浏览器上却显示不出来,比如IE和360,这下怎么办呢 看我的: 360浏览器中包含了两个浏览器 一个是IE(Trident内核),即兼容模式,在使用网银时需要切换为兼容模式 一个是...
  • Vue项目兼容IE问题

    2020-09-05 23:05:48
    Vue兼容IE问题Vue项目兼容IE一、vue项目【非vue-cli项目脚手架】安装babel-polyfill二、在项目的入口main.js文件引入babel-polyfill三、修改配置文件webpack-base-config.js Vue项目兼容IE 一、vue项目【非vue-cli...
  • vue项目兼容IE浏览器babel配置

    千次阅读 2020-08-13 21:43:58
    vue项目IE在浏览器中无法打开,报错 script .js ':' 原因:es6,7语法在IE浏览器中无法正常解析 然后子引用了babel插件,但是安装配置后仍然在IE浏览器中无法打开 后面发现是自己插件下载配置不完整,下面是自己...
  • 项目采用vue全家桶和elementUI等插件技术,vue框架默认不支持ie8及以下,ie9+需要安装babel-polyfill插件,将项目中的es6语法转换为目标浏览器兼容的低版本语法。 注意:使用Webpack版本要高于2.6.1 基本配置 ie...
  • 直接打包,将打包后的文件夹放到vscode中,然后用IE打开发现能正常运行。 但是创建一个项目不可能什么第三方都不安装。 示例:安装echarts vue-echarts npm install echarts vue-echarts 引用插件// main.js ··...
  • vue项目兼容ie

    2019-02-14 10:51:21
    1、安装babel-polylfil npm i --save-dev babel-polyfill 2、在build下webpack.base.conf.js文件中引入 ... "browsers": ["> 1%", "last... "plugins": ["transform-vue-jsx", "transform-runtime"], ] }  
  • vue项目兼容ie11问题解决方案

    万次阅读 2019-06-13 16:21:24
    谷歌浏览器浏览正常,但是在ie11浏览器,qq浏览器(兼容模式),360浏览器(兼容模式),总是登录不了页面,有时能登录页面但是部分页面总是加载不出来,出现白屏现在,看控制台报出语法错误,但是项目中明明已经引入了, ...
  • Vue项目兼容IE的placeholder

    千次阅读 2019-12-05 13:58:00
    实现思路:通过vue自定义指令的形式实现IE9及以下的placeholder兼容。 二、正文 由于项目中使用到了elementui 对于elementui组件也做了单独处理,代码如下: var supportIE = { install:fun...
  • vue项目兼容ie踩得一些坑

    千次阅读 2019-07-19 18:12:26
    几个人花了一个近一个月做了一个vue项目,后面说的vue项目兼容ie,卒 关于遇到的问题: 1.es6 转 es5 转码 ①npm install babel-polyfill --save ②build目录下 webpack.base.config.js修改 2.vuex-along...
  • 主要介绍了详解vue 兼容IE报错解决方案,详细的介绍了几种原因及其解决方案,非常具有实用价值,需要的朋友可以参考下
  • meta http-equiv="X-UA-Compatible" content="IE=edge"> 2.npm安装依赖 npm install babel-polyfill --save-dev 3.在入口文件main.js文件中引入插件 import 'babel-polyfill' 4.需要在webpack.base.config.js...
  • Vue项目兼容IE9(MD.9)

    千次阅读 2018-09-07 20:14:30
    问题:Vue项目用了axios,vuex以及ES6语法等一系列看起来很高大上的新技术后,在IE9-11浏览器直接白屏。 原因:IE对ES6语法支持极差,IE也不支持promise,vuex,axios都依赖promise。 解决方案: 1.首先解决...
  • 可能大家在用vue-cli开发vue项目时,会遇到在IE浏览器中显示一片空白的问题,而且可能还会显示“Promise未定义”的问题,这个时候大家不要慌!现在解决方式来了: 安装 "babel-polyfill" 即可。 步骤: 1、在...
  • 在谷歌浏览器下可以没问题,但在IE浏览器下数据更新了页面没有更新,要手动按下F5 才可以正常 。 通过AJAX请求后台时,当参数相同,IE浏览器会从缓存中取值而非从重新请求服务器。其他使用非IE内核的浏览器并...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,162
精华内容 6,464
关键字:

vue项目兼容ie

vue 订阅