最近在用vue做项目，项目在安卓4,5，ios9页面显示空白，问题解决跟大家分享一下

最近在用vue做项目，项目在安卓4,5，ios9页面显示空白，问题解决跟大家分享一下

安卓4,5，ios9页面空白原因：低版本不支持es6，需要将es6编译成es5

具体解决方法

1.npm install --save-dev babel-preset-es2015（安装ES2015转码规则）

2.npm install --save-dev babel-polyfill

3.npm install es6-promise

4.main.js 中引用 

import Es6Promise from 'es6-promise'

Es6Promise.polyfill()

import 'babel-polyfill'

5.修改.babelrc文件  

{

"presets": ["es2015" , "stage-2"

],

"plugins": ["transform-vue-jsx", "transform-runtime"]

}

6.webpack.base.conf.js 中修改

  对VUX进行转ES5

   {

    test: /vux.src.*?js$/,

    loader: 'babel-loader',

    query: {

    presets: ['es2015']

    },

    },

对自定义脚本进行转ES5

    {

     test: /\.js$/,

    loader: 'babel-loader',

    query: {

    presets: ['es2015']

    },

    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

    }

希望能帮到大家，如果有错误的地方，请指出，谢谢

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>