2023年6月21日发(作者：)

vue项⽬遇到的兼容性问题解决（IE）记录⼀下之前项⽬所遇到的兼容性问题项⽬⽤的是https协议 前端⽤的是Vue全家桶+elementUI框架搭成问题⼀：之前项⽬只能在chrome上正常使⽤ 在⽕狐 IE浏览器上显⽰空⽩ ⽕狐直接阻拦了跨域请求找了半天原因，⽕狐浏览器是不能跨域请求的 会直接拦截请求操作，所以我就设置了proxy代理，这只是解决开发环境上的跨域问题，⽣产环境上还需要设置nginx代理（⽬前还没做到Nginx这⾥，后续做了再做详细的记录）//

修改config/

设置代理proxyTable: { "/api": { target: "xxxx", //设置你调⽤的接⼝域名和端⼝号 changeOrigin: true, //跨域 secure: false //wepack默认http协议，如果要代理https协议，需要增加ecure: false // pathRewrite: { // "^/api": "/" // } } },问题⼆：IE11 不⽀持promise需要将promise转换为浏览器可识别的ES5语法// 1.安装babel-polyfillnpm install --save-dev babel-polyfill// 2.在中引⼊babel-polyfill import 'babel-polyfill'

// 3.或者修改build/⽂件//将entry: { app: './src/'},//替换为entry: { app: ['babel-polyfill', './src/']},问题三：IE浏览器以及edge浏览器的不⽀持es6⾥⾯promise的finally//解决⽅法：//1.安装 axios ynpm install axios y --save//2.在项⽬⾥⾯引⼊依赖require('y').shim()问题四：IE11 中报语法错误 或者缺少‘：’ ‘（’等是因为这些⽂件⾥⾯还存在ES6语法 需要转换⾸先点击报错地点 复制报错地点上⽅的⽂件地址 如：./node_modules/_vue-particles@1.0.9@vue-particles/src/vue-particles/ //

修改build/⽂件{ 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;

2023年6月21日发(作者：)

vue项⽬遇到的兼容性问题解决（IE）记录⼀下之前项⽬所遇到的兼容性问题项⽬⽤的是https协议 前端⽤的是Vue全家桶+elementUI框架搭成问题⼀：之前项⽬只能在chrome上正常使⽤ 在⽕狐 IE浏览器上显⽰空⽩ ⽕狐直接阻拦了跨域请求找了半天原因，⽕狐浏览器是不能跨域请求的 会直接拦截请求操作，所以我就设置了proxy代理，这只是解决开发环境上的跨域问题，⽣产环境上还需要设置nginx代理（⽬前还没做到Nginx这⾥，后续做了再做详细的记录）//

修改config/

设置代理proxyTable: { "/api": { target: "xxxx", //设置你调⽤的接⼝域名和端⼝号 changeOrigin: true, //跨域 secure: false //wepack默认http协议，如果要代理https协议，需要增加ecure: false // pathRewrite: { // "^/api": "/" // } } },问题⼆：IE11 不⽀持promise需要将promise转换为浏览器可识别的ES5语法// 1.安装babel-polyfillnpm install --save-dev babel-polyfill// 2.在中引⼊babel-polyfill import 'babel-polyfill'

// 3.或者修改build/⽂件//将entry: { app: './src/'},//替换为entry: { app: ['babel-polyfill', './src/']},问题三：IE浏览器以及edge浏览器的不⽀持es6⾥⾯promise的finally//解决⽅法：//1.安装 axios ynpm install axios y --save//2.在项⽬⾥⾯引⼊依赖require('y').shim()问题四：IE11 中报语法错误 或者缺少‘：’ ‘（’等是因为这些⽂件⾥⾯还存在ES6语法 需要转换⾸先点击报错地点 复制报错地点上⽅的⽂件地址 如：./node_modules/_vue-particles@1.0.9@vue-particles/src/vue-particles/ //

修改build/⽂件{ 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;