vue在ie9中碰到的问题

最近我们的项目选择用vue来做开发,在这个过程我们还要兼容ie9这个坑,在这里我写一点我碰到的坑

  • 开发选用:vue+vue-cli+axios+router+iview+mock

首先我们按照步骤来安装vue-cli 
创建项目运行

npm install
npm run dev
  • 1
  • 2

然后我们在ie9下打开发现没有用但是vue官网告诉我们他是兼容ie9的

官网地址:https://github.com/vuejs/vue

下图是错误提示ie9: 
 
然后就找资料查文档,总算给我找到了。 
要实现其实很简单,只需要我们下载一个babel-polyfill,

npm install babel-polyfill --save-dev
  • 1

下载完成后我们怎么用它 
这时我们要找到build文件夹下webpack.base.conf.js在里面修改一下就行了

module.exports = {
entry: {
app: './src/main.js'
},
  • 1
  • 2
  • 3
  • 4

改成

module.exports = {
entry: {
'babel-polyfill': 'babel-polyfill',
app: './src/main.js'
},
  • 1
  • 2
  • 3
  • 4
  • 5

就ok了 是不是很简单

第二问题就是axios的请求在ie下没有用 
这个怎么解决? 
也是就是下载一个js的问题 
下面就直接贴代码

npm install es6-promise --save-dev
  • 1
/*main.js下*/
import promise from 'es6-promise'
promise.polyfill()
  • 1
  • 2
  • 3

辛辛苦苦把项目写好了,然后再Chrome跑的天衣无缝。然后经理告诉我要兼容ie9及以上。信心满满的拿出来试了试。GG思密达!!!

一、Pormise的问题,原来是Axios不能直接兼容IE9

先去项目里下载es6-promise

npm install es6-promise

然后去页面导入

import promise from 'es6-promise';
promise.polyfill();
二、URLSearchParams未定义的问题,原来是IE9不支持URLSearchParams。(千万别用一些不被大众浏览器兼容的东西,都是坑)

先去项目里下载qs

npm install qs

然后去Axios放参数的时候这样放

import qsfrom 'qs';
var params = {
'param1':1,
'param2':2
}
qs.stringify(params)
三、GET方法在IE9会直接默认去拿缓存,返回的是304而不是正常拿到数据后的200.
这个就在GET方法的params中加个时间戳就行了。
time:new Date().getTime()
 
 
 
 

vue-cli axios ie9 问题的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  5. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  6. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

  7. Vue技术点整理-Vue CLI

    Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...

  8. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  9. 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

    vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ ​ 2.安装cnpm: >: npm install -g cnpm --regis ...

  10. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

随机推荐

  1. linux学习(十一)linux安装nginx

    一.前言 由于本地练手的小demo用的是vue+spring boot来玩的,所以部署的时候想着用Nginx来实现反向代理[即请求转发,解决前后端分离的跨域请求问题],既然要用,那么首先得在服务器上面 ...

  2. Oracle学习(二)SQL高级--表数据相关

    SQL高级语句 top / limit / rownum / percent (前XXX条数据) --top(SQL Server / MS Access) select top 条数 from 表; ...

  3. vue学习09 图片切换

    目录 vue学习09 图片切换 定义图片数组:imgList:[],列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind,v-bind指令可以设置元素属性,比如src 图片 ...

  4. 你在开发过程中使用Git Rebase还是Git Merge?

    摘要:在git里面经常的一个争论是到底用rebase还是用merge? 1. 痛苦吗?代码历史中的迷失羔羊 我们先来看一个真实的代码提交历史图形化截图: 图片源自 https://storage.kr ...

  5. ZooKeeper-3.5.6分布式锁

    原理 基本方案是基于ZooKeeper的临时节点与和watch机制.当要获取锁时在某个目录下创建一个临时节点,创建成功则表示获取锁成功,创建失败则表示获取锁失败,此时watch该临时节点,当该临时节点 ...

  6. 「面试」拿到B站的意向书

    此次B站服务端开发面试之旅可谓惊险,不过通过对大部分面试题套路的掌握,不出意外还是拿下了,下面我们来看看这些骚题是不是常见的不能再常见的了.这些面试题看了就能面上?当然不是,只是通过这些题让自己知道所 ...

  7. 使用 PL/SQL Developer 导入 .sql 文件

    操作系统:Windows 10 x64 PL/SQL Developer Version 12.0.7.1837 (64 bit) 01.226959 第一节:下载 Oracle Database X ...

  8. shell脚本中,关于if,以及条件判断

    #!/bin/sh SYSTEM=`uname -s` #获取操作系统类型 if [ $SYSTEM = "Linux" ] ; then #如果是linux的话打印linux字符 ...

  9. 阅读源码,从ArrayList开始

    前言 为啥要阅读源码?一句话,为了写出更好的程序. 一方面,只有了解了代码的执行过程,我们才能更好的使用别人提供的工具和框架,写出高效的程序.另一方面,一些经典的代码背后蕴藏的思想和技巧很值得学习,通 ...

  10. IDEA中创建父子工程与maven打包Springboot聚合工程报错程序包不存在问题处理

    公司新项目需使用java技术栈,便使用IDEA搭建了一个多SpringBoot项目的聚合工程,因为初次使用,遇到了很多问题,maven打包时各种报错,在网上查了好多终于解决了,为巩固记忆,特作此记录. ...