最近使用了 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 多插件和梯子配置,不方便折腾,就没有验证。不断放大缩小调试界面调整布局,勉强可以调试。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.