精华内容
下载资源
问答
  • 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

     

    展开全文
  • VueCli3.* 项目兼容IE11

    千次阅读 2020-01-11 03:08:09
    IE11访问出现空白页面,现象如下 HTML1300: 进行了导航。 login HTML1300: 进行了导航。 login DOM7011: 此页上的代码禁用了反向和正向缓存。有关详细信息,请参阅: http://go.microsoft.com/fwlink/?LinkID=291337...

    该项目是以,Vue-cli3.* 创建的工程,运行项目
    在这里插入图片描述
    IE11访问出现空白页面,现象如下

    • HTML1300: 进行了导航。
      login
    • HTML1300: 进行了导航。
      login
    • DOM7011: 此页上的代码禁用了反向和正向缓存。有关详细信息,请参阅: http://go.microsoft.com/fwlink/?LinkID=291337
      login
    • [HMR] Waiting for update signal from WDS…
    • Download the Vue Devtools extension for a better development experience:
      https://github.com/vuejs/vue-devtools
    • You are running Vue in development mode.
      Make sure to turn on production mode when deploying for production.
      See more tips at https://vuejs.org/guide/deployment.html
    • SCRIPT1002: 语法错误
      app.js (9270,3)

    在这里插入图片描述
    定位该错误位置
    在这里插入图片描述

    我们先不管这个报错的意义,我们先看下官网上是否有解释!结果我们一查vue-cli 官网,其中就有浏览器兼容性的说明-点我哦,在文档中这样写道:

    浏览器兼容性

    browserslist

    你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。这个值会被 @babel/preset-envAutoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

    现在查阅这里了解如何指定浏览器范围。

    Polyfill

    useBuiltIns: ‘usage’

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

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

    如果有依赖需要 polyfill,你有几种选择:

    1. 如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。

    2. 如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-apppolyfills 选项预包含所需要的 polyfill。注意 es6.promise 将被默认包含,因为现在的库依赖 Promise 是非常普遍的。

      // babel.config.js
      module.exports = {
        presets: [
          ['@vue/app', {
            polyfills: [
              'es6.promise',
              'es6.symbol'
            ]
          }]
        ]
      }
      

      ::: tip 提示
      我们推荐以这种方式添加 polyfill 而不是在源代码中直接导入它们,因为如果这里列出的 polyfill 在 browserslist 的目标中不需要,则它会被自动排除。
      :::

    3. 如果该依赖交付 ES5 代码,但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify):请使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了,但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

    更多细节可查阅 @babel-preset/env 文档

    构建库或是 Web Component 时的 Polyfills

    当使用 Vue CLI 来构建一个库或是 Web Component 时,推荐给 @vue/babel-preset-env 传入 useBuiltIns: false 选项。这能够确保你的库或是组件不包含不必要的 polyfills。通常来说,打包 polyfills 应当是最终使用你的库的应用的责任。

    现代模式

    有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性,但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长,运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015,所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。

    Vue CLI 提供了一个“现代模式”帮你解决这个问题。以如下命令为生产环境构建:

    vue-cli-service build --modern
    

    Vue CLI 会产生两个应用的版本:一个现代版的包,面向支持 ES modules 的现代浏览器,另一个旧版的包,面向不支持的旧浏览器。

    最酷的是这里没有特殊的部署要求。其生成的 HTML 文件会自动使用 Phillip Walton 精彩的博文中讨论到的技术:

    • 现代版的包会通过 <script type="module"> 在被支持的浏览器中加载;它们还会使用 <link rel="modulepreload"> 进行预加载。

    • 旧版的包会通过 <script nomodule> 加载,并会被支持 ES modules 的浏览器忽略。

    • 一个针对 Safari 10 中 <script nomodule> 的修复会被自动注入。

    对于一个 Hello World 应用来说,现代版的包已经小了 16%。在生产环境下,现代版的包通常都会表现出显著的解析速度和运算速度,从而改善应用的加载性能。

    ::: tip 提示
    <script type="module"> 需要配合始终开启的 CORS 进行加载。这意味着你的服务器必须返回诸如 Access-Control-Allow-Origin: * 的有效的 CORS 头。如果你想要通过认证来获取脚本,可使将 crossorigin 选项设置为 use-credentials

    同时,现代浏览器使用一段内联脚本来避免 Safari 10 重复加载脚本包,所以如果你在使用一套严格的 CSP,你需要这样显性地允许内联脚本:

    Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='
    

    :::

    先不官有没有用,先配置再说,

    1. .browserslistrc修改
    > 1%
    last 2 versions
    not ie <= 8
    
    1. babel.config.js修改
    module.exports = {
      presets: [
        [
          '@vue/app',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }
    
    
    1. package.json 中发现有core-js这个依赖包, 所以就不用安装 ‘@babel/polyfill,在main.js 中引入core-js
      在这里插入图片描述
      重新编译,运行,看效果,发现没有啥变化,回去看下这个错误
      在这里插入图片描述
      怀疑element-ui的问题,因为编译会排除第三方依赖,所以我们这里要转换,打开vue.config.js加入配置
    ....,
      transpileDependencies: [
        'element-ui'
      ]
    }
    

    重新编译,运行,看效果,哈哈,完美打开,登录进去看看其他页面,毕竟登录见面太简单啦,不算完美解决!我们登录进去之后发现还有部分错误,这些错误都是我们引入的第三方插件或组件,所以对于这些组件,有时我们需要做一些处理。所以我们把用到并且报错的放到这里
    在这里插入图片描述
    如果出现Proxy的未定义的错误,我们针对Proxy 对象进行 polyfill,我们在public下 index.html 文件中引入 es6-proxy-polyfill.js,[点击这里下载]()放到public目录下引入

     <script src = "<%= BASE_URL %>proxy.min.js"></script>
    

    或者直接

     <script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
    

    Tips

    • Babel 7.4.0 以后,该包已被弃用(deprecated)。官方推荐使用 core-js/stableregenerator-runtime/runtime 替代。 @babel/polyfill

    • core-js3.*之前的版本直接在main.js直接导入就行,之后的版本需要这样导入

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

    在这里插入图片描述

    • Babel 7.4.0之前的引用 需要安装@babel/polyfill ,并在入口main.js文件添加import '@babel/polyfill'
    import '@babel/polyfill
    
    • Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9+,Vue 底层是支持。

    现在微软已经不再维护win7,现在都是win10,ie 已抛弃,ie的爸爸已经放弃啦!我们又何必折腾呢!

    展开全文
  • 主要介绍了详解vue 兼容IE报错解决方案,详细的介绍了几种原因及其解决方案,非常具有实用价值,需要的朋友可以参考下
  • 主要介绍了vue+iview 兼容IE11浏览器的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vuecli4或者3兼容IE11

    2021-08-05 17:48:44
    vuecli4或者3兼容IE11,请教一下,怎么配置
  • 主要介绍了Vue兼容ie9的问题全面解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue-cli3.0兼容IE11的方法

    千次阅读 2020-01-07 16:48:40
    Vue3.0兼容IE方法 因为项目需要,必须在IE11上跑现在已经写好的项目。目前的状况是在Chrome上可以顺利的跑起来,在IE就会出现白屏的情况,也会出现下列错误。 会出现各种各样奇怪的语法错误,我猜测是ES6语法IE不...

    Vue3.0兼容IE方法
    因为项目需要,必须在IE11上跑现在已经写好的项目。目前的状况是在Chrome上可以顺利的跑起来,在IE就会出现白屏的情况,也会出现下列错误。
    会出现各种各样奇怪的语法错误,我猜测是ES6语法IE不支持的缘故
    会出现各种各样奇怪的语法错误,我猜测是ES6语法IE不支持的缘故。
    因为本人也是前端菜鸟,所以花了不少时间,才研究出了一个兼容方法。这里跟大家分享一下,也加深一下自己的理解和记忆。
    首先需要Babel-polyfill
    Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,所以现在需要Babel-polyfill来实现
    ①首先安装插件

    cnpm install --save --dev babel-polyfill 
    

    安装完成后,跑项目的时候可能会出现缺少其他插件,这时候重新运行一遍
    npm install即可
    ②在Vue项目中引入babel-polyfill(main.js)

    import 'babel-polyfill'
    

    ③配置webpack
    因为VUE-CLI3.0中隐藏了webpack.config.js 研究了很久在vue.config.js中配置入口没有成功。所以采取了另外一种方式。使用

    vue inspect > output.js
    

    执行该命令后,根目录就会产生一个名为 output.js 的文件,在文件中找到entry

      entry: {
        app: [
          './src/main.js'
        ]
      }
    

    将其替换为

      entry: {
        app: [
          "@babel/polyfill", "./src/main.js"
        ]
      }
    

    用次方法修改了webpack的入口信息。个人理解应该是通过vue.config.js中可以直接配置webpack入口,但是本人技术有限,不知道如何配置,有熟悉配置的大佬希望可以指教一下。

    展开全文
  • vue elementui 兼容ie11

    2021-08-02 16:25:51
    Chrome无论线上还是本地都是正常的,但IE11打开之后就是空白,本地也是空白,遂先解决了本地空白问题。 1.安装npm install --save babel-polyfill 2.main.js代码最前面加入 import babelPolyfill from 'babel-...

    Chrome无论线上还是本地都是正常的,但IE11打开之后就是空白,本地也是空白,遂先解决了本地空白问题。

    1.安装npm install --save babel-polyfill

    2.main.js代码最前面加入

    import babelPolyfill from 'babel-polyfill';

    Vue.use(babelPolyfill)

    3.vue.config.js加入

    transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : []

    4.babel.config.js加入

    以上步骤的时候本地ie11已经能出来界面了,我以为就此解决了。。。

    发布到服务器上还是空白界面,并报如下图错误。各种百度之后,找到问题原因,是IE11不支持es6语法,因为我的代码中引用了crypto-js,所以还需要在vue.config.js中加入transpileDependencies:['crypto-js'](这行代码代表你的ie11报错位置不兼容的组件,加上你的组件就可以了)

     

    展开全文
  • Vue 3 不再支持 IE 11

    2021-04-06 20:51:41
    4 月 3 日,Vue 作者尤雨溪宣布:Vue 3 将不会支持 IE11。 总结 放弃Vue 3IE11支持计划。 重点关注Vue 2.7的backport兼容特性。 尤神表示: 在漫长的开发过程中,也对IE11兼容性进行了研究和实验,但由于...
  • 先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决 如果没有其他问题是可以了的,下面是我代码中出现的其他问题导致页面无法显示或者报错 sockjs报错 控制台会一直报这个错,sockjs-node 是...
  • 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"&gt; ...
  • vue项目兼容IE11

    千次阅读 2018-12-11 16:39:10
    1、npm安装babel-polyfill npm install babel-polyfill --save-dev ...3、在webpack.config.js配置文件中做修改,即可。 entry: { app: ["babel-polyfill", "./src/main.js"] } 4....
  • Vue CLI3 bable兼容ie11ie10

    2021-05-26 11:14:39
    Vue CLI3 bable兼容ie11ie10 Vue CLI3兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘ 1、安装依赖 cnpm i @babel/polyfill -S 2、入口文件 main.js 引入依赖 import '@babel/polyfill'; 3.修改 babel.config.js ...
  • 目前新版本的vue3.0和vue2.0的写法上都有了很大的改动,包括对文件打包和ie兼容的问题,都有很大的改动?我使用的ui框架是iviewAdmin的,在网上翻了很久都是针对vue2.0的修改,在build文件夹下的方式,所以完全用不...
  • VueCli3 兼容IE11 配置艰苦历程

    千次阅读 2020-08-01 10:34:20
    由于目前项目是采用VueCli3 搭建的项目,对google,火狐、eage 、360等浏览器兼容不错,但是对IE确出现了问题,目前项目要上线,那个着急啊,花了将近两天的时间从网上那个度娘,必应啊,但还好最终还是完美解决了。...
  • 主要介绍了详解webpack3编译兼容IE8的正确姿势,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue兼容ie11打包

    2021-08-25 20:35:39
    导入后打包用ie11打开有可能就没问题了 像我这导入一个第三方包出现了兼容性问题点击那个js 这里出现的问题是这个包的问题,在vue.config.js中写上这句代码外加包的名称就不会出现第三方包的问题,如果目录没有vue...
  • vue cli3 兼容ie浏览器

    2021-06-21 10:47:19
    import Es6Promise from ‘es6-promise’ Es6Promise.polyfill() .babelrc文件内配置 { “presets”: [ [ “@vue/app”, { “useBuiltIns”: “entry”, “polyfills”: [ “es6.promise”, “es6.symbol” ] } ...
  • vue兼容IE11

    千次阅读 2019-02-19 17:50:19
    三个步骤 1.package.json -&gt; dependencies增加"babel-polyfill": "^6.26.0"(版本号可以根据npm install --save babel-polyfill拿...3.index.js -&gt; 增加import "babel-p...
  • vue3.0 兼容ie浏览器

    2021-06-10 15:19:37
    vue3.0 兼容ie浏览器 安装babel/polyfill npm install --save @babel/polyfill 在main.js里面引入 (一定要在最上面,第一行) import '@babel/polyfill' 安装完成后会有babel.config.js文件,需手动定义...
  • Vue兼容IE11 很直接很实用

    千次阅读 2020-07-14 15:05:22
    问题:最近项目要求兼容IE11。what!!!(心凉半截)于是各种查资料、查前辈们分享的方法,终于发现了最有用的;现总结如下: 一、简单实用篇 1. npm安装babel-polyfill (如果你安装了淘宝镜像可以cnpm) npm ...
  • vue2.0开发做兼容时,你可能会发现vue项目在IE11版本浏览器中是空白的。。。看到空白的页面你可能会蒙蔽几秒钟,没事,下面我们就来解决这个问题~ 让IE11支持vue2.0 首先用npm 安装babel-polyfill npm install --...
  • 直接打包,将打包后的文件夹放到vscode中,然后用IE打开发现能正常运行。 但是创建一个项目不可能什么第三方都不安装。 示例:安装echarts vue-echarts npm install echarts vue-echarts 引用插件// main.js ··...
  • vue项目兼容ie11问题解决方案

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

    2020-05-12 14:07:16
    Vue写法 vue 写法 new Vue({ el: '#app', router, store, template: '<Layout/>', components: { Layout }, render: function (createElement) { if ('-ms-scroll-limit' in document.documentElement....
  • vue-cli3项目兼容IE11

    千次阅读 2020-10-08 22:29:10
    项目解决方案: 1:安装 @babel/polyfill 模块 ...具体引用是在vue.config.js中configureWebpack字段中(vue3初始化没有vue.config.js文件。可直接创建,与 package.json 同级) module.exports = { configur
  • 主要介绍了详解Vue Cli浏览器兼容性实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue项目兼容IE浏览器

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

空空如也

空空如也

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

vue3兼容ie11

vue 订阅