vue cli3 es6 安卓低版本 兼容问题

微信扫一扫,分享到朋友圈

vue cli3 es6 安卓低版本 兼容问题

问题:

1.在测试在三星 安卓7.0版本中报错,其他手机可以,低版本安卓手机出现白屏,(注释:如果静态div是正常的如图)

报错内容:

`[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token …

[vue-router] uncaught error during route navigation:

2.解决方案 ,当然是要使用bable神器啦,babel文档英文,看得也是一头雾水,在同事帮助下解决问题了,所以建议大家还是好好看babel文档。

  1. 安装依赖
  2. npm i core-js -S
  3. npm i @babel/plugin-transform-arrow-functions -D
  4. npm i @babel/preset-env -D
  5. npm i @babel/polyfill -s
  6. 在babel.config.js文件下配置(如下图)
  7. vue.config.js 文件加上 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 是我们要将上面的箭头函数编译,我们需要这个插件。

注意:在vue cli3 默认手脚框架也可以兼容低版本问题

presets: [
'@vue/cli-plugin-babel/preset'
],

echarts属性设置(大全)

上一篇

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

下一篇

你也可能喜欢

vue cli3 es6 安卓低版本 兼容问题

长按储存图像,分享给朋友