vue项目遇到的兼容性问题解决(IE)

记录一下之前项目所遇到的兼容性问题
项目用的是https协议 前端用的是Vue全家桶+elementUI框架搭成

问题一:之前项目只能在chrome上正常使用 在火狐 IE浏览器上显示空白 火狐直接阻拦了跨域请求

找了半天原因,火狐浏览器是不能跨域请求的 会直接拦截请求操作,所以我就设置了proxy代理,这只是解决开发环境上的跨域问题,生产环境上还需要设置nginx代理(目前还没做到Nginx这里,后续做了再做详细的记录)

// 修改config/index.js 设置代理
proxyTable: {
      "/api": {
        target: "https://xxxx", //设置你调用的接口域名和端口号
        changeOrigin: true, //跨域
        secure: false //wepack默认http协议,如果要代理https协议,需要增加ecure: false
        // pathRewrite: {
        //   "^/api": "/"
        // }
      }
    },

问题二:IE11 不支持promise

需要将promise转换为浏览器可识别的ES5语法

// 1.安装babel-polyfill
npm install --save-dev babel-polyfill
// 2.在main.js中引入babel-polyfill
 import 'babel-polyfill' 
// 3.或者修改build/webpack.base.conf.js文件
//将
entry: {
 app: './src/main.js'
},
//替换为
entry: {
 app: ['babel-polyfill', './src/main.js']
},

问题三:IE浏览器以及edge浏览器的不支持es6里面promise的finally

//解决方法:
//1.安装 axios promise.prototype.finally
npm install axios promise.prototype.finally --save
//2.在项目main.js里面引入依赖require('promise.prototype.finally').shim()

问题四:IE11 中app.js报语法错误 或者缺少‘:’ ‘(’等

是因为这些文件里面还存在ES6语法 需要转换
首先点击报错地点 复制报错地点上方的文件地址 如:./node_modules/_vue-particles@1.0.9@vue-particles/src/vue-particles/index.js

 // 修改build/webpack.base.conf.js文件
{
        test: /\.js$/,
        loader: "babel-loader",
        include: [
		// 把这个文件添加进去 让他进行babel编译
          resolve(
            "node_modules/_vue-particles@1.0.9@vue-particles/src/vue-particles"
          ),
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },

问题五:ie11打不开vue项目,报错 “对象不支持“addEventListener”属性或方法”

在head标签中加入< meta http-equiv=“X-UA-Compatible” content=“IE=EDGE”/>
这个属性主要是设置浏览器优先使用什么模式来渲染页面的。代码IE=edge告诉IE使用最新的引擎渲染网页,这个在需要兼容IE浏览器的情况下都可以加上这句话

问题六:IE 11 flex:1;样式会出错,跟实际想要的效果不同

因为IE11 flex:1;会识别为flex:1 1 0;而其他浏览器是flex:1 1 auto;
所以改为width:100%;flex:1 1 auto; 或width:100%;flex-grow:1;

  • 6
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值