详解使用VueJS开发项目中的兼容问题

我们开发的项目，兼容到IE9+，以下所提到的问题都是在这个项目中所遇见的问题，如有错误，或者理解不正确的地方，望多多指点。

1. KingEditor，IE下提示‘对象不支持moveToElementText属性或方法'

解决办法:

我用的kingEditor是V4.1.10版本

修改kingEditor.js的5844行：

if (_IE) {
  var rng = cmd.range.get(true);
  rng.moveToElementText(div[0]);
  rng.select();
  rng.execCommand('paste');
  e.preventDefault();
  }

修改为：

if (_IE) {
    var rng = cmd.range.get(true);
    try {
      rng.moveToElementText(div[0]);
      rng.select();
      rng.execCommand('paste');
      e.preventDefault();
    }
    catch (e) { }
  }

在压缩kingEditor.js后替换kingEditor-min.js即可

2.vue组件的长字符串拼接

在ie不兼容长字符串拼接，需要使用字符串拼接

3.axios.js的post请求。

在chrome下

var newParams = new URLSearchParams();
newParams.append('type',vm.typeNum);
newParams.append('num','20');
newParams.append('curpage',vm.cur);
axios.post(url,newParams).then(function(res){
}).catch(function(){});

在ie下需要

axios({
            method: 'post',
            url: '/f/api/list/news',
            data: {
              type: vm.typeNum,
              num: 4,
              curpage: vm.cur
            },
            transformRequest: [function (data) {
              var ret = ''
              for (var it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret
            }],
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then(function (response) {
            vm.articel_list = response.data.informations;
            vm.all = Math.ceil(response.data.totalnum/4);
          },function (responese) {
//            console.log(responese);
          })

4.在IE下，提示“Promise”未定义

需要引入polyfill.js文件 下载地址：  https://github.com/babel/babel/tree/master/packages/babel-polyfill

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • 详解vue-resource promise兼容性问题

    背景 其实这个问题在之前的项目开发中就出现过,但是当初只解决问题了,并没有针对问题作总结:于是乎今天踩到了自己埋的坑,所以决定记录一下.那么到底是什么问题呢?就是"在安卓低版本,如果你在vue项目中使用了vue-resource(vue-resource是什么?它是一个具有ajax功能的第三方npm包),那么http请求和响应都是正常的,但是,注意,但是来了啊!!但是响应进不去promise回调",下面我们来具体看一下 正题 一.Vue Resource如何使用? 大家都知道,我们在v

  • 解决Vue2.0自带浏览器里无法打开的原因（兼容处理）

    本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom

  • 如何去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path:

  • Vue兼容ie9的问题全面解决方案

    前言 背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本.经过测试,Vue 的核心框架 vuejs 本身,以及生态的官方核心插件(VueRouter.Vuex等)均可以在 ie9 上正常使用. Vue 的作者尤雨溪对于Vue 的学习建议 中有提及为了将项目更好的生态化/工程化,要尽可能学习及使用新的 ECMAScript 规范.目前 ES6/

  • Vue网页html转换PDF（最低兼容ie10）的思路详解

    HTML转PDF: 1.页面底层实现--Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件 具体实现: 要这样实现首先要引入两个插件: html2canvas.js jsPdf.debug.js 注: 因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式 所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这

  • 解决VUEX兼容IE上的报错问题

    在IE 上使用Vuex的过程中,出现如下错误: SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser. 解决方法: 1.先安装babel-polyfill npm install --save-dev babel-polyfill 2.webpack.base.config.js下修改文件 entry: { 'babel-polyfill': 'babel-polyfill', app: './src/main.j

  • vue拦截器实现统一token,并兼容IE9验证功能

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9. import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = wind

  • 详解使用VueJS开发项目中的兼容问题

    我们开发的项目,兼容到IE9+,以下所提到的问题都是在这个项目中所遇见的问题,如有错误,或者理解不正确的地方,望多多指点. 1. KingEditor,IE下提示'对象不支持moveToElementText属性或方法' 解决办法: 我用的kingEditor是V4.1.10版本 修改kingEditor.js的5844行: if (_IE) { var rng = cmd.range.get(true); rng.moveToElementText(div[0]); rng.select();

  • 详解如何在SpringBoot项目中使用全局异常处理

    详解如何在SpringBoot项目中使用全局异常处理

    目录 1. 创建自定义异常 2.创建全局异常处理器 3.创建测试控制器 在完整的项目开发中,异常的出现几乎是无法避免的:如果凡是有可能出现异常的地方,我们都手动的使用try-catch将其捕获的话,虽然也能达到处理异常的效果,但是这样做会使得代码显得十分臃肿并且后期不好维护,也不利于多人系统开发. 在Spring Boot中提供了统一处理异常的方法,SpringBoot中有一个ControllerAdvice的注解,使用该注解表示开启了全局异常的捕获,我们只需在自定义一个方法使用Exceptio

  • 详解如何在SpringBoot项目中使用统一返回结果

    详解如何在SpringBoot项目中使用统一返回结果

    目录 1.创建Spring Boot项目 2.返回结果的封装 3.后端接口实现 3.1 创建实体类 3.2 创建dao层 3.3 创建Controller层 4.前端部分 5.验证 在一个完整的项目中,如果每一个控制器的方法都返回不同的结果,那么对项目的维护和扩展都会很麻烦:并且现在主流的开发模式时前后端分离的模式,如果后端返回各式各样的结果,那么在前后端联调时会非常的麻烦,还会增加前后端的格外任务. 所以,在一个项目中统一返回结果就是一个十分必要和友好的做法.接下来就用一个简单的demo来看看

  • 详解如何为SpringBoot项目中的自定义配置添加IDE支持

    详解如何为SpringBoot项目中的自定义配置添加IDE支持

    导言 代码是写给人看的,不是写给机器看的,只是顺便计算机可以执行而已 --<计算机程序的构造和解释(SICP)> 导言 在我们的项目里经常会出现需要添加自定义配置的应用场景,例如某个开关变量,在测试环境打开,在生产环境不打开,通常我们都会使用下面的代码来实现,然后在Spring Boot配置文件中添加这个key和Value Application.java: application.properties 或者是没有使用@Value而直接在XML中使用我们配置的属性值 application.x

  • 详解如何在NodeJS项目中优雅的使用ES6

    NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加上参数:--harmony.但是,即使如此node也还是没有支持全部的ES6特性.所以这个时候就需要用到Babel了. 项目地址:https://github.com/future-challenger/petshop 现在开始Babel 在开始使用Babel之前,假设 1.你已经安装了nodejs,并且已经熟悉了Js. 2.你也可以使用n

  • 详解如何在vue项目中引入elementUI组件

    详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • 详解如何在vue项目中使用layui框架及采坑

    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2

  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • 详解如何去除vue项目中的#——History模式

    详解如何去除vue项目中的#——History模式

    使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:   这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申到

  • 详解如何在vue项目中使用lodop打印插件

    项目中使用到打印的功能.领导推荐使用Lodop Lodop是什么东东,反正就是可以定制打印的插件... 既然是插件,vue的渐进式开发.完全可以拿来化为己用. 如何使用那?先大概看了下开发文档,就是一堆demo,一个js文件,三个安装程序,我擦,这么简单.come on 电脑安装C-Lodop,就可以打印预览来了. 开工,翻来覆去就一个LodopFuncs.js是干货,扔到项目中.就差怎么调里面的方法了. 如何引用,当然得改造喽 LodopFuncs.js 方法改造如下 //====判断是否需要

随机推荐