vue-echarts 在安卓低版本下的坑。

2018-08-08 12:20:23 +08:00
 cooljs

最近使用了 vue 和移动端进行混合开发,在高版本安卓(大概是 7 以上)下界面成功显示,在低版本安卓--测试机是 5.1,界面是一片空白,查看资料和调试后发现是 es6 在低版本安卓的兼容性问题,后来引入了babel-polyfill,结果,哎,还是一片空白。用 chrome 链接了手机调试,报错在一个 npm 包--resize-detector,里面的 es6 代码没有转译,手动改成 es5 之后,界面终于出来了,再查找,原来是vue-echarts的坑,他的 md 文件里有这么一段描述

如果你正在使用 vue-cli 来创建项目并且希望使用未经转译的组件(引入 vue-echarts/components/ECharts 而非直接引入 vue-echarts)来减小打包尺寸(是推荐用法),那么 Vue 的 webpack 模板可能会把 node_modules 中的文件排除在 Babel 转译范围以外。要解决此问题,需要按下述的方式修改 build/webpack.base.conf.js

{
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-echarts'),
+         resolve('node_modules/resize-detector')
+       ]
}

哎,坑。谁用谁知道。
还有 6x 版本的 chrome 手机调试界面是乱的,查资料说是不支持 API 了?要 5x 版本才行,因为 chrome 有 n 多插件和梯子配置,不方便折腾,就没有验证。不断放大缩小调试界面调整布局,勉强可以调试。

1296 次点击
所在节点    JavaScript
2 条回复
dbpe
2018-08-08 16:45:41 +08:00
react 大法好。。退 Vue 保平安啊
cooljs
2018-08-08 17:52:08 +08:00
@dbpe 都要学啊兄弟哈哈

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/477901

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX