当前位置: 首页 > Web前端 > vue.js

vuecli3es6低版本安卓兼容问题

时间:2023-04-01 11:02:05 vue.js

问题:1.测试中三星安卓7.0版本报错,其他手机没问题,但在低版本安卓手机出现白屏,(注:如果静态div是正常的如图)报错Content:`[vue-router]Failedtoresolveasynccomponentdefault:SyntaxError:Unexpectedtoken...[vue-router]uncaughterrorduringroutenavigation:2.解决办法当然是使用bable这个神器,babel文档是英文的,我也是一头雾水,在同事的帮助下解决了问题,所以建议大家好好看看babel文档.安装依赖npmicore-js-Snpmi@babel/plugin-transform-arrow-functions-Dnpmi@babel/preset-env-Dnpmi@babel/polyfill-s在babel.config.js文件下配置(如下图)vue.config.js文件加上chainWebpack:config=>{config.entry('main').add('@babel/polyfill');},module.exports={presets:[['@vue/app',{useBuiltIns:'usage',corejs:'3.0.0'}],['@babel/env',{useBuiltIns:'usage',corejs:'3.0.0',targets:{edge:'17',firefox:'60',chrome:'67',safari:'11.1'}}]],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant'],'@babel/plugin-syntax-dynamic-import','@babel/plugin-transform-arrow-functions']};注意:~~~~@babel/plugin-transform-arrow-functions是我们要编译上面的箭头函数,我们需要这个插件。注:vuecli3默认的手足框架也兼容低版本问题预设:['@vue/cli-plugin-babel/preset'],参考:https://www.cnblogs.com/amiez...https://www.jianshu.com/p/cbd...https://www.babeljs.cn/