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. 神经网络全连接层+softmax:

    如下图:(图片来自StackExchange) 强化说明全连接层: 1.通常将网络最后一个全连接层的输入,即上面的x \mathrm{x}x,视为网络从输入数据提取到的特征. 2. 强化说明softm ...

  2. 系统模块sys的常用方法

    sys.argv参数 sys.argv  等价于是一个列表,argv[0] 代表当前脚本程序路径名,可以通过在外部获取多个参数传递给脚本程序执行,按照列表的取值方式第二个数据就是sys.argv[1] ...

  3. 30种SQL语句优化

    1.'对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用 ...

  4. TP 3.2 图片处理类

    TP 3.2 图片处理类 <?php namespace Common\Common; class ImageEdit{ /** * [上传图片并生成缩略图] * @param [type] $ ...

  5. pip安装更换镜像源

    说明 有时候网不好,pip安装非常慢,所以需要更换源,特记录如下   国内镜像地址: # 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple # 豆瓣 http ...

  6. P3378 堆(模板)

    P3378 [模板]堆 题目描述 给定一个数列,初始为空,请支持下面三种操作: 给定一个整数 x,请将 x 加入到数列中. 输出数列中最小的数. 删除数列中最小的数(如果有多个数最小,只删除 1 个) ...

  7. Java知识系统回顾整理01基础05控制流程07结束外部循环

    一.break是结束当前循环 二.结束当前循环实例 break; 只能结束当前循环 public class HelloWorld { public static void main(String[] ...

  8. Python实现的数据结构与算法之链表详解

    一.概述 链表(linked list)是一组数据项的集合,其中每个数据项都是一个节点的一部分,每个节点还包含指向下一个节点的链接.根据结构的不同,链表可以分为单向链表.单向循环链表.双向链表.双向循 ...

  9. kail使用sunJDK

    今天在安装软件的时候报错,提示应使用oracle的JDK,所以鼓捣了一会发现个简单的方法 1.下载安装包解压文件到opttar -xzvf jdk-8u91-linux-x64.tar.gz 2.设置 ...

  10. 【题解】[SDOI2017]数字表格

    Link #include<bits/stdc++.h> using namespace std; #define int long long const int MAXN=1e6; in ...