vue项目遇到的兼容性问题解决(IE)
记录一下之前项目所遇到的兼容性问题项目用的是https协议 前端用的是Vue全家桶+elementUI框架搭成问题一:之前项目只能在chrome上正常使用 在火狐 IE浏览器上显示空白 火狐直接阻拦了跨域请求找了半天原因,火狐浏览器是不能跨域请求的 会直接拦截请求操作,所以我就设置了proxy代理,这只是解决开发环境上的跨域问题,生产环境上还需要设置nginx代理(目前还没做到Nginx这里,后续
记录一下之前项目所遇到的兼容性问题
项目用的是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;
更多推荐
所有评论(0)