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. Nodejs-原型链污染

    原型链污染 javascript 原型链 在javascript中,继承的整个过程就称为该类的原型链. 每个对象的都有一个指向他的原型(prototype)的内部链接,这个原型对象又有它自己的原型,一 ...

  2. 神作!阿里首发并发编程神仙笔记,Github已星标92K

    Qzone 微信 神作!阿里首发并发编程神仙笔记,Github已星标92K JAVA超神编程 2020-09-23 21:04:06 JVM 无论什么级别的Java从业者,JVM都是进阶时必须迈过的坎 ...

  3. spark 四种模式

    Spark 三种运行模式  一:Spark On Local     此种模式下,我们只需要在安装Spark时不进行hadoop和Yarn的环境配置,只要将Spark包解压即可使用,运行时Spark目 ...

  4. Jquery的一键上传组件OCUpload及POI解析Excel文件

    第一步:将js文件引入页面 <script type="text/javascript" src="${pageContext.request.contextPat ...

  5. Python-读写csv数据模块 csv

    案例: 通过股票网站,我们获取了中国股市数据集,它以csv数据格式存储 Data,Open,High,Low,Close,Volume,Adj Close 2016-06-28,8.63,8.47,8 ...

  6. java版集成Allure报告--注释使用说明

    testNG集成Allure报告--注释使用说明 前置条件 首先需要下载allure的zip包解压,然后配置环境变量即可(win).allure的GitHub下载地址: 然后执行testn.xml或者 ...

  7. Harmony OS 开发避坑指南——源码下载和编译

    Harmony OS 开发避坑指南--源码下载和编译 本文介绍了如何下载鸿蒙系统源码,如何一次性配置可以编译三个目标平台(Hi3516,Hi3518和Hi3861)的编译环境,以及如何将源码编译为三个 ...

  8. 0921 LCA练习

    1.poj 1330 数据结构中的树,在计算机科学中是非常重要的,例如我们来看看下面这棵树: 在图中我们对每个节点都有编号了. 8号节点是这棵树的根.我们定义,一个子节点向它的根节点的路径上,任意一个 ...

  9. 【小白学PyTorch】18 TF2构建自定义模型

    [机器学习炼丹术]的炼丹总群已经快满了,要加入的快联系炼丹兄WX:cyx645016617 参考目录: 目录 1 创建自定义网络层 2 创建一个完整的CNN 2.1 keras.Model vs ke ...

  10. Word rings

    Word rings 题目描述 这道题就是想求出所有的环,然后在所有环中比较出环串的平均长度最长的那一个,然后就输出平均长度最长的,如果在一个点当中的样例中没有环的话我们就应该输出"No S ...