vue项目在浏览器打不开?
发布网友
发布时间：2024-09-15 01:57
共1个回答
热心网友
时间：2024-10-12 03:18
毕竟不是自己手动搭的脚手架，很多配置都是吃现成的，所以踩坑常用的事。在config的index.js文件夹里。把host的值由localhost改为“0.0.0.0”，然后就可以用手机浏览器ip+端口号打开了。
ps:改配置文件就是重新npmstart一下才能看到效果
ps:localhost改成本地ip的方法也是可以的。但是如果这样做的话，pc端就不能用localhost了，必须要用ip加端口号才能打开。
以上
vue项目在IE浏览器打不开问题
安装babel-polyfill
1.??npminstall--savebabel-polyfill
2.??man.js引入??import'babel-polyfill'
3.??index.html?添加??metahttp-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、说明：ThiswillemulateafullES2015+environmentandisintendedtobeusedinanapplicationratherthanalibrary/tool.Thispolyfillisautomaticallyloadedwhenusingbabel-node.（模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器）；
2、安装：npminstall--savebabel-polyfill；
3、配置：mole.exports={entry:["babel-polyfill","./src/main.js"]};
4、main.js中配置：import'babel-polyfill'//放在最顶部，确保全面加载。
二、关于es6-promise
1、说明：若在项目中使用了ES6promise对象，它在Chrome、Safari浏览器下可以正常运行，但在360兼容模式、IE内核中不支持；
2、安装：npminstalles6-promise；
3、配置：在main.js中加入require('es6-promise').polyfill()，用于在node或浏览器中支持ES6与CommonJS。
三、步骤详细图
1、index引入这句话或者这三句话
2、执行npminstall--savebabel-polyfill；
执行完上面语句package.json里面就有了这个依赖（检查2部是否执行完成的一个结果）
3、最上面引入，确保加载进去。
4、修改entery里面的内容改成下图那样
四、问题如图：
当把这些攻略都做了一遍后，发现打包完的360的急速模式可以了（本地运行还是不可以），但是！！！ie浏览器，360兼容模式，不管打包还是没打包，都不能显示，完全没有加载进去数据，如下图
并且还报错以下未定的错
（1）、
查询后发现，是因为IE没有这个方法，不支持sessionStorage，解决的方法是：IE本地调试用cookie，或者用webstrom打开项目，但我确实用的webstorm打开的项目，还是不可以，后来找到解决方法，要把es6转es5！
然后，npmrundev，居然可以了适配了。
解决Vue浏览器兼容edgesafariie问题最近做的一个Vue项目，遇到了在Edge浏览器，Safari（version:9.xx）浏览器上打不开的问题。分别有以下报错：
SafariError:
EdgeError:
const和...（spreadoperator）语法都是ES6语法，这说明在Edge和safari9浏览器下都不支持ES6语法。带着这个判断，我去查了一下es6的浏览器支持情况，果不其然，safari10以下和Edge14以下和IE都不支持es6语法，具体ES6浏览器支持情况请参考以下表格：
BrowserSupportforES6(ECMAScript2015)
找到问题的原因在于浏览器不支持ES6语法，所以需要使用Babel去编译。接下来是如何在前端项目中配置babel，使能够将ES6编译成ES5语法：
注意：所有使用到了ES6语法的文件都需要配置在以上的molerulesinclude里面。
重新运行项目，刷新浏览器发现页面恢复正常。
这篇文章涉及到的前端技术包括：ES6的新特性，babel的配置，等等。感兴趣的同学可以查看我的其他文章或者自行学习。
参考文献：FromES5toESNext
[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，不允许网站跟踪，这种情况下在项目中使用????????localStoragesessionStorage?cookie都会报错（大部分是这个原因）
??????查看Safari隐私和安全性：设置-Safari
第三：在Safari如何跟踪调试
???????????1、打开手机端web检查器，设置-Safari-高级（最底部）-Web检查器打开
????????????2、确保iOS系统手机接入MAC电脑（必须是Mac，window调试不了ios系统）
????????????3、找到Mac电脑的Safari浏览器，找到开发者，就会显示的手机的设备
????????????4、此时此刻就可以使用了，调试各个App上网页版的页面了。
????????????注：如果是Hybrid嵌入式开发，线上版本，可能就不能调试了，因为IOSApp会把线上的调试功能??????????给禁用，安全！
热心网友
时间：2024-10-12 03:19
毕竟不是自己手动搭的脚手架，很多配置都是吃现成的，所以踩坑常用的事。在config的index.js文件夹里。把host的值由localhost改为“0.0.0.0”，然后就可以用手机浏览器ip+端口号打开了。
ps:改配置文件就是重新npmstart一下才能看到效果
ps:localhost改成本地ip的方法也是可以的。但是如果这样做的话，pc端就不能用localhost了，必须要用ip加端口号才能打开。
以上
vue项目在IE浏览器打不开问题
安装babel-polyfill
1.??npminstall--savebabel-polyfill
2.??man.js引入??import'babel-polyfill'
3.??index.html?添加??metahttp-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、说明：ThiswillemulateafullES2015+environmentandisintendedtobeusedinanapplicationratherthanalibrary/tool.Thispolyfillisautomaticallyloadedwhenusingbabel-node.（模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器）；
2、安装：npminstall--savebabel-polyfill；
3、配置：mole.exports={entry:["babel-polyfill","./src/main.js"]};
4、main.js中配置：import'babel-polyfill'//放在最顶部，确保全面加载。
二、关于es6-promise
1、说明：若在项目中使用了ES6promise对象，它在Chrome、Safari浏览器下可以正常运行，但在360兼容模式、IE内核中不支持；
2、安装：npminstalles6-promise；
3、配置：在main.js中加入require('es6-promise').polyfill()，用于在node或浏览器中支持ES6与CommonJS。
三、步骤详细图
1、index引入这句话或者这三句话
2、执行npminstall--savebabel-polyfill；
执行完上面语句package.json里面就有了这个依赖（检查2部是否执行完成的一个结果）
3、最上面引入，确保加载进去。
4、修改entery里面的内容改成下图那样
四、问题如图：
当把这些攻略都做了一遍后，发现打包完的360的急速模式可以了（本地运行还是不可以），但是！！！ie浏览器，360兼容模式，不管打包还是没打包，都不能显示，完全没有加载进去数据，如下图
并且还报错以下未定的错
（1）、
查询后发现，是因为IE没有这个方法，不支持sessionStorage，解决的方法是：IE本地调试用cookie，或者用webstrom打开项目，但我确实用的webstorm打开的项目，还是不可以，后来找到解决方法，要把es6转es5！
然后，npmrundev，居然可以了适配了。
解决Vue浏览器兼容edgesafariie问题最近做的一个Vue项目，遇到了在Edge浏览器，Safari（version:9.xx）浏览器上打不开的问题。分别有以下报错：
SafariError:
EdgeError:
const和...（spreadoperator）语法都是ES6语法，这说明在Edge和safari9浏览器下都不支持ES6语法。带着这个判断，我去查了一下es6的浏览器支持情况，果不其然，safari10以下和Edge14以下和IE都不支持es6语法，具体ES6浏览器支持情况请参考以下表格：
BrowserSupportforES6(ECMAScript2015)
找到问题的原因在于浏览器不支持ES6语法，所以需要使用Babel去编译。接下来是如何在前端项目中配置babel，使能够将ES6编译成ES5语法：
注意：所有使用到了ES6语法的文件都需要配置在以上的molerulesinclude里面。
重新运行项目，刷新浏览器发现页面恢复正常。
这篇文章涉及到的前端技术包括：ES6的新特性，babel的配置，等等。感兴趣的同学可以查看我的其他文章或者自行学习。
参考文献：FromES5toESNext
[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，不允许网站跟踪，这种情况下在项目中使用????????localStoragesessionStorage?cookie都会报错（大部分是这个原因）
??????查看Safari隐私和安全性：设置-Safari
第三：在Safari如何跟踪调试
???????????1、打开手机端web检查器，设置-Safari-高级（最底部）-Web检查器打开
????????????2、确保iOS系统手机接入MAC电脑（必须是Mac，window调试不了ios系统）
????????????3、找到Mac电脑的Safari浏览器，找到开发者，就会显示的手机的设备
????????????4、此时此刻就可以使用了，调试各个App上网页版的页面了。
????????????注：如果是Hybrid嵌入式开发，线上版本，可能就不能调试了，因为IOSApp会把线上的调试功能??????????给禁用，安全！
