关于vue-cli脚手架搭建的vue项目在手机浏览器无法打开的问题
毕竟不是自己手动搭的脚手架,很多配置都是吃现成的,所以踩坑常用的事。在config的index.js文件夹里。把host的值由localhost改为“0.0.0.0”,然后就可以用手机浏览器ip+端口号打开了。
ps:改配置文件就是重新npm start 一下才能看到效果
ps:localhost改成本地ip的方法也是可以的。但是如果这样做的话,pc端就不能用localhost了,必须要用ip加端口号才能打开。
以上
vue项目在IE浏览器打不开问题
安装babel-polyfill
1. npm install --save babel-polyfill
2. man.js 引入 import 'babel-polyfill'
3. index.html 添加 meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
4. build中的webpack.base.conf.js修改如下配置
entry:{
app:['babel-polyfill','./src/main.js']
}
vue 项目在ie浏览器的兼容问题
一、关于babel-polyfill
1、说明:This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.(模拟ES2015以上的环境,主要用于对ES6新语法不支持的浏览器);
2、安装: npm install --save babel-polyfill;
3、配置: module.exports = { entry: ["babel-polyfill", "./src/main.js"] };
4、main.js中配置: import 'babel-polyfill' //放在最顶部,确保全面加载。
二、关于es6-promise
1、说明:若在项目中使用了ES6 promise对象,它在Chrome、Safari浏览器下可以正常运行,但在360兼容模式、IE内核中不支持;
2、安装: npm install es6-promise;
3、配置:在main.js中加入 require('es6-promise').polyfill() ,用于在node或浏览器中支持ES6 与CommonJS。
三、步骤详细图
1、index引入这句话或者这三句话
2、执行 npm install --save babel-polyfill;
执行完上面语句package.json里面就有了这个依赖(检查2部是否执行完成的一个结果)
3、最上面引入,确保加载进去。
4、修改entery里面的内容改成下图那样
四、问题如图:
当把这些攻略都做了一遍后,发现打包完的360的急速模式可以了(本地运行还是不可以),但是!!!ie浏览器,360兼容模式,不管打包还是没打包,都不能显示,完全没有加载进去数据,如下图
并且还报错以下未定的错
(1)、
查询后发现,是因为IE没有这个方法,不支持sessionStorage,解决的方法是:IE本地调试用cookie,或者用webstrom打开项目,但我确实用的webstorm打开的项目,还是不可以,后来找到解决方法, 要把es6转es5 !
然后, npm run dev ,居然可以了适配了。
解决 Vue 浏览器兼容 edge safari ie 问题
最近做的一个Vue项目,遇到了在Edge浏览器,Safari(version: 9.xx)浏览器上打不开的问题。分别有以下报错:
Safari Error:
Edge Error:
const 和 ...(spread operator)语法都是ES6语法,这说明在Edge和safari 9 浏览器下都不支持ES6语法。带着这个判断,我去查了一下es6的浏览器支持情况,果不其然,safari10以下和Edge14以下 和 IE 都不支持es6语法,具体ES6浏览器支持情况请参考以下表格:
Browser Support for ES6 (ECMAScript 2015)
找到问题的原因在于浏览器不支持ES6语法,所以需要使用Babel去编译。接下来是如何在前端项目中配置babel,使能够将ES6编译成ES5语法:
注意 : 所有使用到了ES6语法的文件都需要配置在以上的 module rules include 里面。
重新运行项目,刷新浏览器发现页面恢复正常。
这篇文章涉及到的前端技术包括: ES6的新特性 , babel的配置 ,等等。感兴趣的同学可以查看我的其他文章或者自行学习。
参考文献: From ES5 to ESNext
[ios10]ios10以下版本内浏览器无法打开vue项目
在项目(vue)测试过程中发现,ios10一下版本的浏览器均无法正常加载,出现白屏现象,开始以为是不支持es6语法的原因,但是添加es6转es5的配置之后还是无法加载, 通过找了一系列方法发现可能是swiper造成的(首页使用了swiper进行图片轮播) 。
解决:将swiper4.4.1-3.4.2,并修改一定的语法。
Vue项目在部分ios手机Safari浏览器上打开为白屏
Vue项目在部分ios手机Safari浏览器上打开为白屏有可能是一下原因造成:
第一:部分es6语法不兼容 推荐在全局引入 babel-polyfill 解决es6在Safari的兼容问题
第二:有部分Safari浏览器设置了不允许网站读写所有cookie,不允许网站跟踪,这种情况下在项目中使用 localStorage sessionStorage cookie都会报错(大部分是这个原因)
查看Safari隐私和安全性:设置- Safari
第三:在Safari如何跟踪调试
1、打开手机端web检查器,设置- Safari -高级(最底部)- Web检查器打开
2、确保iOS系统手机接入 MAC 电脑(必须是Mac,window调试不了ios系统)
3、找到Mac电脑的 Safari浏览器,找到开发者,就会显示的手机的设备
4、此时此刻就可以使用了,调试各个App上网页版的页面了。
注:如果是 Hybrid 嵌入式开发,线上版本,可能就不能调试了,因为IOS App 会把线上的调试功能 给禁用,安全!