精华内容
下载资源
问答
  • 主要介绍了详解vue 兼容IE报错解决方案,详细的介绍了几种原因及其解决方案,非常具有实用价值,需要的朋友可以参考下
  • vue兼容IE8以上解决方案

    千次阅读 2020-07-11 14:25:47
    vue主要采用了ES6 Promise,我们知道的,在 JavaScript 中,所有代码都是单线程的,也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。 二、解决方案 1、采用 babel-polyfill 进行转换语法。 2、...

    一、说明背景

    vue主要采用了ES6 Promise,我们知道的,在 JavaScript 中,所有代码都是单线程的,也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。

    二、解决方案

    1、采用 babel-polyfill 进行转换语法。

    2、安装babel-polyfill

    npm install -S babel-polyfill

     3、main.js 引入babel-polyfill

    import 'babel-polyfill'

    注意:babel-polyfill 默认会把node_modules 进行过滤出来(这就是很多引入了babel-polyfill还是不能解决兼容性问题的根本原因)

    三、还未解决看下面的操作

    1、当你的语法比较规则的时候,可能按照上面的就可以兼容IE8以上了。

    2、报错 SCRIPT1006: 缺少 ')'

    • 打开IE F12 
    • 如上图提示app.js 12104行报错。点击进入查看。
    展开全文
  • vue ie8 兼容方案

    万次阅读 2018-10-18 15:45:30
    最后的最后,只能寻求解决兼容方案了。在先用的双向绑定的框架中,我选用了avalon2 avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, ...

    公司合作了一个项目,前端是用的vue构建的 非SPA

    项目的最后上线,客户提出必须要 兼容IE8

    最后的最后,只能寻求解决兼容方案了。在先用的双向绑定的框架中,我选用了 avalon2

    avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。

    http://avalonjs.coding.me/home.html

    吐槽一句:文档写的过于一般,跟vue的文档,真是一个天,一个地....

    下面说出一些对比解决的语法

    基础部分

    new Vue -->  avalon.define
    
    el: -->$id
    
    id="xxx" --> ms-controller="footer"
    
    去掉data外层包裹
    
    去掉methods外层包裹

    语法部分

    v-model --> ms-duplex
    
    v-for --> ms-for ,(index,item)顺序需要替换
    
    :href  -->  ms-attr="{href: ''}"
    
    v-show --> ms-visible 
    
    v-html --> ms-html
    
    v-if --> ms-if
    
    :style -->ms-css
    
    :class 不用改动
    
    :自定义属性 ms-attr="{'xxx': '' +  +''}"  (如果自定义属性有特殊符号切记用 引号包裹)
    
    多个自定义属性用逗号隔开:ms-attr="{'a': 'b','c':'d'}"

    一个小实例

    <script type="text/javascript" src="https://unpkg.com/avalon2@2.2.4/dist/avalon.js"></script>
    <div ms-controller="app">
    	<div ms-if="isshow" ms-attr="{'a': 'b','c':'d'}">show attr</div>
    	<div ms-for="(index,item) in datas">{{index}}--{{item}}</div>
    	<div ms-for="(index,item) in nums">{{index}}</div>
    	
    </div>
    <script>
    	var _vm_wbstc = avalon.define({
    		$id: 'app',
           	isshow:true,
    		datas:['a','b','c'],
    		nums:new Array(5),
            init: function() {
            }
    	});
    	console.log(_vm_wbstc);
    	_vm_wbstc.init();
    </script>
    

    最终花费了1天的时间替换了100多个页面。速度还是比较快速的。

    切记:ie8下 参数前务必带上$符号!!!!

    这篇先这样,下面一篇文章将讲解对比的 生命周期,事件,组件 等的转换,后续会写一个开源转换器 :) (不能发表情真坑爹)

     

    展开全文
  • vue兼容IE8

    2020-11-26 14:04:15
    vue兼容IE8 无良需求要求兼容IE8,坚持反抗,然后乖乖去搞 vue.config.js module.exports = { //项目中使用的需要转换兼容的 transpileDependencies: [ "vuex-persist", "query-string", "vue-echarts", ...

    vue兼容IE8

    无良需求要求兼容IE8,坚持反抗,然后乖乖去搞
    vue.config.js

    module.exports = {
    	//项目中使用的需要转换兼容的
    	transpileDependencies: [
    	   "vuex-persist", 
    	    "query-string",
    	    "vue-echarts",
    	    "resize-detector",
    	    "@antv",
    	    "webpack-dev-server/client",
    	    "vue-awesome-swiper",
    	    "swiper",
    	    "dom7",
    	 ],
    	 //svg
    	chainWebpack: (config) => {
    		const svgRule = config.module.rule("svg");
    		svgRule.uses.clear();
    		// svgRule.use('vue-svg-loader').loader('vue-svg-loader');
    		svgRule
    			.use("babel-loader")
    			.loader("babel-loader")
    			.end()
    			.use("vue-svg-loader")
    			.loader("vue-svg-loader");
    	},	
      };
    
    

    暂时先这些,项目搞完之后再回头看,完全不知道啥是啥,等有空搞个完整的出来

    展开全文
  • 主要介绍了Vue兼容ie9的问题全面解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 刚写好的项目在谷歌能打开,ie打不开,需要处理兼容问题 先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决 如果没有其他问题是可以了的,下面是我代码中出现的其他问题导致页面无法显示或者...
  • IE 页面空白报错信息此时页面一片空白报错原因Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法...

    IE 页面空白

    报错信息

    此时页面一片空白

    报错原因

    Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。

    例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术。

    简单的说,兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用ES6。

    Polyfill 是什么

    举个例子,有些旧浏览器不支持 Number.isNaN方法,Polyfill就可以是这样的:

    if(!Number.isNaN) {

    Number.isNaN= function(num) {return(num !==num);

    }

    }

    Polyfill就是类似这样解决API的兼容问题

    解决方案

    1、使用babel-polyfill

    引入 babel-polyfill

    npm i -S babel-polyfill

    如何使用

    使用它时需要在你应用程序的入口点顶部或打包配置中引入。

    在main.js 引入

    import 'babel-polyfill'

    或者在config中的 webpack.base.conf.js中 修改配置

    entry:{

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

    }

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

    3、babel-loader 中指定模块转码

    增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。

    找到webpack.base.conf.js 中的babel-loader

    比如我这里用了element-ui 跟 v-charts  修改成如下:

    {

    test:/\.js$/,

    loader:'babel-loader',

    include: [

    resolve('src'),

    resolve('test'),

    resolve('node_modules/webpack-dev-server/client'),

    resolve('node_modules/v-charts/src'),

    resolve('node_modules/vue-awesome'),

    resolve('node_modules/element-ui/packages'),

    resolve('node_modules/element-ui/src')

    ]

    }

    4、打包问题

    如果是webpack代码打包出错,一般到 github webpack Issues中可以找到答案

    这个错误是因为webpack-dev-server 版本问题

    5、Babel 配置 .babelrc文件

    .babelrc是Babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件

    在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加"useBuiltIns": "entry" ,这是一个指定哪些内容需要被 polyfill(兼容) 的设置

    useBuiltIns有三个设置

    false - 不做任何操作

    entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill

    usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill

    {"presets": [

    ["env", {"modules": false,"useBuiltIns": "entry"}],"stage-2"],"plugins": ["transform-runtime", "transform-vue-jsx"],"env": {"test": {"presets": ["env", "stage-2"],"plugins": ["istanbul"]

    }

    }

    }

    总结

    1、用vue 写的项目最多可以兼容到IE9 及以上版本

    2、使用 babel-polyfill

    3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径

    4、配置 .babelrc文件

    展开全文
  • Vue 兼容 ie9 的全面解决方案 一、兼容IE主要是从以下几个方面考虑 es6语法兼容 Number对象es6新方法兼容 requestAnimationFrame方法兼容 axios Promise兼容 axios cors兼容 Vue 官方对于 ie 浏览器版本兼容情况...
  • Vue 兼容 ie9

    2021-02-23 09:21:00
    Vue官方对于ie浏览器版本兼容情况的描述是ie9+,即是ie9及更高的版本。经过测试,Vue的核心框架vuejs本身,以及生态的官方核心插件(VueRouter、Vuex等)均可以在ie9上正常使用。然而版本较旧的浏览器并不支持es6...
  • 前言背景情况http请求:axiosVue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 vuejs 本身,以及生态的官方核心插件(VueRouter、Vuex等)均可以在 ie9 上正常使用...
  • IE兼容vue解决方案

    2019-12-10 13:55:25
    IE兼容ie9 的环境上,es6 的部分新对象、表达式,并不支持,解决方案是使用 babel-polyfill 组件,它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码,运行以下代码安装babel-polyfill组件 npm install ...
  • 或许会有部分错误,那是因为可能某个字段或者方法写法有问题,或者不能设置为null等等,这些都再需要特定解决下,但是以上方式,能够解决90%的IE兼容问题(只支持IE8以上,不包括IE8),最终目的只是将ES6转成ES5 ...
  • IE 页面空白报错信息此时页面一片空白报错原因Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法...
  • vue 项目在ie浏览器的兼容问题

    万次阅读 多人点赞 2019-06-26 19:04:03
    兼容是因为对es6不支持 一、关于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 ...
  • 背景情况vue - 2.5.11vue-cli 使用模板webpack-simplehttp请求:axiosVue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架vuejs本身,以及生态的官方核心插件(Vue...
  • 其中最重要的自然是ie浏览器的兼容性问题了,于是便开始了网上查找兼容ie11旅程。网上的解决办法大都一致,便是让你安装babel-polyfill模块。使用babel-polyfill将vue项目中的es6语法的相关模块进行转译(转译成es5)...
  • 我尝试过很多解决方案,但最后都以失败告终,求方法【我试了用'babel-polyfill' 还试了meta http-equiv="X-UA-Compatible" content="IE=8"等等】
  • vue-cli3.0兼容IE浏览器

    2021-02-26 13:43:03
    因为项目中一些功能用到了IE的ocx组件部分,必须在IE环境下运行,按正常vue支持来说,IE8+应该是支持的,可能ES6写法需要进行兼容,我的项目就是在IE中无法打开,空白,也报一些 未定义什么的错误。 为了解决这个...
  • Vuecli3项目兼容ie方案

    千次阅读 2020-05-12 14:33:34
    Vuecli3项目兼容ie方案 1.安装以下npm包: npm install --save babel-polyfill npm install es6-promise --save 2,在main.js中引用: import 'babel-polyfill' import Es6Promise from 'es6-promise' Es6Promise....
  • https://blog.csdn.net/dizuncainiao/article/details/102746582
  • vue 兼容IE解决方案, Babel .babelrc

    千次阅读 2019-03-27 14:07:21
    解决方案 总结 回到目录 IE 页面空白 报错信息 此时页面一片空白 回到目录 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、...
  • 兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持, 解决方案是使用 babel-polyfill 来正常使用ES6。 第一步: 安装babel-polyfill npm i babel-polyfill 第二步: 在main.js中引入babel-polyfill ...

空空如也

空空如也

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

ie8vue兼容方案

vue 订阅