精华内容
下载资源
问答
  • vue解决浏览器兼容问题的方法
    千次阅读
    2020-05-15 19:09:19

    vue-cli3下 解决浏览器兼容性问题:主要是因为IE浏览器不支持ES6 promise的功能
    1. 安装babel-polyfill依赖

    			npm install babel-polyfill --save --dev
    

    2.在mian.js中引入import ‘babel-polyfill’

    更多相关内容
  • VUE浏览器兼容问题

    2020-07-08 21:35:41
    vue cli2 项目中使用Vuex时,ie浏览器会出现“Vuex requires a Promise polyfill in this browser”的错误提示,这是因为使用了ES6 Promise,而IE浏览器不支持,解决方案如下: 安装babel-polyfill 执行以下命令...

    在 vue cli2 项目中使用Vuex时,ie浏览器会出现“Vuex requires a Promise polyfill in this browser”的错误提示,这是因为使用了ES6 Promise,而IE浏览器不支持,解决方案如下:

    1. 安装babel-polyfill 执行以下命令,重启服务器:
    npm install --save babel-polyfill
    
    1. 在main.js引入
    import 'babel-polyfill'
    
    1. 在webpack.base.conf.js中配置:
    entry: {
        app: ['babel-polyfill','./src/main.js']
    },
    

    vue-cli3下 解决浏览器兼容性问题

    1. 安装babel-polyfill依赖
     npm i babel-polyfill --save-dev
    
    1. 在src同级目录下新建vue.config.js文件配置如下
    module.exports = {
        configureWebpack: {
            devServer: {
                proxy: {
                    //名字可以自定义,这里我用的是api/
                    '/api/': {
                        target: 'https://www.163.com', //设置你调用的接口域名和端口号 别忘了加http
                        ws: true, // 是否代理websockets
                        changeOrigin: true, //这里设置是否跨域
                        pathRewrite: {
                            '^/api/': 'https://www.163.com'
                        }
                    }
                }
            }
        },
        chainWebpack: config => {
        // 其他配置
        config.entry('main').add('babel-polyfill') // main是入口js文件
        // 其他配置
       }
    }
    
    展开全文
  • vue解决浏览器兼容问题

    千次阅读 2020-01-04 15:40:42
    vue cli2 项目中使用Vuex时,ie浏览器会出现“Vuex requires a Promise polyfill in this browser”的错误提示,这是因为使用了ES6 Promise,而IE浏览器不支持,解决方案如下: 1. 安装babel-polyfill 执行...

    在 vue cli2 项目中使用Vuex时,ie浏览器会出现“Vuex requires a Promise polyfill in this browser”的错误提示,这是因为使用了ES6 Promise,而IE浏览器不支持,解决方案如下:

     

    1. 安装babel-polyfill 执行以下命令,重启服务器:
    npm install --save babel-polyfill
    
    2.在main.js引入
    import 'babel-polyfill'
    
    3.在webpack.base.conf.js中配置:
    entry: {
        app: ['babel-polyfill','./src/main.js']
    },
    

    vue-cli3下 解决浏览器兼容性问题

     

    1. 安装babel-polyfill依赖
     npm i babel-polyfill --save-dev
    
    2.在src同级目录下新建vue.config.js文件配置如下
    
    module.exports = {
        configureWebpack: {
            devServer: {
                proxy: {
                    //名字可以自定义,这里我用的是api/
                    '/api/': {
                        target: 'https://www.163.com', //设置你调用的接口域名和端口号 别忘了加http
                        ws: true, // 是否代理websockets
                        changeOrigin: true, //这里设置是否跨域
                        pathRewrite: {
                            '^/api/': 'https://www.163.com'
                        }
                    }
                }
            }
        },
        chainWebpack: config => {
        // 其他配置
        config.entry('main').add('babel-polyfill') // main是入口js文件
        // 其他配置
       }
    }


     

    展开全文
  • 在处理浏览器兼容问题之前,我们先来看一下现在的浏览器市场份额是怎样的,:backhand_index_pointing_down:下面是来自statCounter的数据,基本上覆盖了全世界浏览器市场份额的统计,而且前端er经常使用的caniuse所...
  • 系统兼容IE浏览器问题以及解决方案 问题 vue项目在IE浏览器上运行时会出现兼容问题:JavaScript语法报错,css样式错乱。原因是在IE(以IE11为例)浏览器下,部分js的写法需要改变,部分样式在IE浏览器上不支持,...

    系统兼容IE浏览器问题以及解决方案

    问题

    vue项目在IE浏览器上运行时会出现兼容性问题:JavaScript语法报错,css样式错乱。原因是在IE(以IE11为例)浏览器下,部分js的写法需要改变,部分样式在IE浏览器上不支持,以及一些IE浏览器特有的问题。

    1. vue 只兼容ie8以上版本;

    2. IE 不兼容 axios的promiss对象;

    3. IE 不兼容es6语法;

    解决方案

    下载对应插件包解决js兼容性问题:babel-polyfill,es6-promise以及 babel-plugin-transform-es2015-modules-commonjs

    一、关于babel-polyfill

    1、说明:This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.(模拟ES2015以上的环境,主要用于对ES6新语法不支持的浏览器);

    2、安装:npm install --save babel-polyfill;

    3、配置:module.exports = { entry: [“babel-polyfill”, “./src/main.js”] };

    4、main.js中配置:import ‘babel-polyfill’ //放在最顶部,确保全面加载

    二、关于es6-promise

    1、说明:若在项目中使用了ES6 promise对象,它在Chrome、Safari浏览器下可以正常运行,但在360兼容模式、IE内核中不支持;

    2、安装:npm install es6-promise;

    3、配置:在main.js中加入require(‘es6-promise’).polyfill(),用于在node或浏览器中支持ES6 与CommonJS。

    因为项目中require和import混用的原因,在做了IE兼容之后打包会出现问题,会报以下错误:

    Cannot assign to read only property 'exports' of object '#<Object>'
    

    此时就需要安装babel-plugin-transform-es2015-modules-commonjs插件来解决报错

    先安装:

    npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
    

    然后再 .babelrc 中添加该插件

     "plugins": ["transform-es2015-modules-commonjs"]
    

    安装完以上插件之后,还需要做相关配置的修改,具体操作如下:

    vue.config.js文件chainWebpack方法中添加

    config.entry.app = ["babel-polyfill", "./src/main.js"];
    config.module.rule('compile')
          .test(/\.js$/)
          .include
          .add(resolve('src'))
          .add(resolve('test'))
          .add(resolve('node_modules/webpack-dev-server/client'))
          .add(resolve('node_modules'))
          .end()
          .use('babel')
          .loader('babel-loader')
          .options({
            presets: [
              ['@babel/preset-env', {
                modules: false
              }]
            ]
          }); 
    

    babel.config.js中对应修改,添加sourceType和useBuiltIns:

    module.exports = {
      presets: [
        // '@vue/cli-plugin-babel/preset', //文件原始内容
        ['@vue/app', {
          useBuiltIns: 'entry',             //添加的内容
        }]
      ],
      sourceType: 'unambiguous'
    }
    

    main.js中代码顶部加入对应引用:

    import 'babel-polyfill'
    import Es6Promise from 'es6-promise'
    require('es6-promise').polyfill()
    Es6Promise.polyfill()Plain Text
    

    以上就是处理IE浏览器js兼容问题,至于css样式兼容,则需要对应修改对应文件样式,在IE浏览和chrome浏览器上分别测试,两边都适配才可以。

    展开全文
  • Vue 浏览器兼容

    万次阅读 2018-12-19 10:31:41
    vue支持所有兼容ECMAScript5的浏览器,因IE8不支持ECMAScript5特性,故IE8及其以下浏览器均不支持vue。...因PC端存在浏览器兼容问题,应用较少。在不考虑IE8兼容性的情况下(譬如,内部使用系统),可以使用vue。 ...
  • Vue CLI 浏览器兼容

    2021-09-15 22:57:21
    浏览器兼容性 关于浏览器的兼容我们可以从下面一些内容来了解与认识: Vue CLI 3初始化的项目,你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器...
  • IE 页面空白报错信息此时页面一片空白报错原因Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、...为了解决这个问题,我们...
  • vue3.0中解决浏览器兼容

    千次阅读 2020-04-28 11:28:39
    先安装 npm i babel-polyfill --save-dev 然后在vue.config.js 文件中的 chainWebpack 添加 然后就好啦,测试一下
  • vue项目浏览器兼容问题

    千次阅读 2019-07-11 15:47:33
    浏览器兼容问题 Vue项目修改默认滚动条样式:element-ui隐藏标签el-scrollbar、vuescroll插件; IE浏览器不兼容vue-socket.io:vue-socket.io-extended结合socket.io-client; IE浏览器input[type=“password”]...
  • vue 微信浏览器缓存问题解决方案

    千次阅读 2020-12-22 04:37:28
    1. 试过js、css打包时添加时间戳,因为打包后每次都是新名字的文件,所以感觉加不加时间戳都没有效果 试了一下果然原因应该是微信浏览器缓存了index.html, 所以打开缓存的页面根本没有任何请求2. 试过index.html添加...
  • 360安全浏览器兼容模式无法访问vue怎么解决?下面本篇文章给大家介绍一下vue在IE和360兼容模式下无法显示问题。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。360兼容模式下报错:[vuex] vuex ...
  • 背景:公司需要做一个企微H5应用,选型是vue3,于是使用vue-cli@4搭建一个vue3项目(vue3+router+vuex+sass+linter),搭建完毕后,增加了vue-i18n做国际化,本地调试正常,于是部署到测试环境,使用手机访问企微...
  • Vue 2.0浏览器兼容性整理

    千次阅读 2019-05-10 14:47:13
    Vue不支持IE8及以下版本,因为Vue使用了IE8无法模拟的Es5特性,但它支持所有兼容es5的浏览器 浏览器 兼容的版本 IE 10,11 Microsoft Edge(window10操作系统的内置浏览器) 12,13,14,15,16...
  • 当加上draggable="true"时,会导致火狐拖拽出现问题,会触发dragstart事件,然后mousemove和mouseup监听出现问题。但不会影响Chrome浏览器解决办法:去掉draggable="true"语句,在火狐中拖拽正常了 demo正确代码...
  • Vue3-浏览器兼容性 IE篇

    千次阅读 2022-04-04 23:52:51
    检测IE浏览器 浏览器兼容
  • vue项目中浏览器兼容问题

    千次阅读 2019-09-29 18:20:05
    vue项目中浏览器兼容问题 1.安装 npm install --save babel-polyfill 2.在main.js中引入(最好放在最前面) import 'babel-polyfill' 3.在webpack.base.conf.js中配置 module.exports = { ...... entry: { app: ...
  • 先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决 如果没有其他问题是可以了的,下面是我代码中出现的其他问题导致页面无法显示或者报错 sockjs报错 控制台会一直报这个错,sockjs-node 是...
  • 都是IE惹的祸多浏览器兼容问题
  • package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 ...
  • vue3项目其他浏览器正常访问,360安全浏览器,IE空白 安装插件 npm install --save-dev @babel/core npm install --save-dev @babel/preset-env babel.config.js 文件 module.exports = { presets: ['@babel/...
  • Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 vuejs 本身,以及生态的官方核心插件(VueRouter、Vuex等)均可以在 ie9 上正常使用。 Vue 的作者尤雨溪对于...
  • vue-cli3项目浏览器兼容问题,在低版本系统中白屏 vue-cli3 中自带 babel-polyfill ,会将es6语法转化成es5 语法。但是如果依赖中有es6, polyfill是不能检测出来的。官网解释: 处理办法: 如果该依赖基于一个...
  • setTimeout和setInterval的浏览器兼容性分析
  • Vue-cli3.0浏览器兼容配置问题

    千次阅读 2020-05-22 09:56:00
    本文讲一讲自己在工作过程中针对vue-cli3.0项目兼容性配置的学习和应用。 1.browserslist 在 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。 在 ...
  • 在根目录的index.html加上标签强制转换google内核 代码如下:
  • // } //监听方法兼容写法 _addHandler(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on...
  • 引言: 在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的...3. 怀疑是CSS在不同浏览器下的兼容问题,见过排查,没有发现问题。 4. 排查360浏览器,发现其在当前页面的显示中,默认使用了I
  • 浏览器兼容性 #browserslist 你会发现有package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件),指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer...
  • 前端使用vue-router做单页面路由并开启history模式时,会碰到一个问题:部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法,会导致页面加载不出来。 解决这个问题的思路是: 当浏览器支持push...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,595
精华内容 10,238
关键字:

vue浏览器兼容问题解决