capacitor3+vue 在android低版本 白屏问题

capacitor3使用es2017+, 需要用babel翻译才行。
主要是使用了async,然后默认情况下vue使用的 babel-loader 会忽略所有 node_modules 中的文件, 所以只需要在 vue.config.js里加上一条配置即可。

module.exports = {
  transpileDependencies: ['@capacitor'],  
};

vue cli配置: https://cli.vuejs.org/zh/config/#transpiledependencies
capacitor3升级指南: https://capacitorjs.com/docs/updating/3-0#es2017

注意,我没有使用ionic框架! 要使用ionic的话,就得把ionic的所有依赖也加到 transpileDependencies 里。
如果你的android机子的webview版本过低(应该是chrome 54版本以下, 可以用 navigator.userAgent 查看) 的话,那么就千万别用ionic了,因为54版本之前使用了过时(已被废除)的api 注册element document.registerElement(),不支持新api customElements.define来注册element, 而ionic都是用customElements.define去注册html element元素的, 这个问题好像用balbel都解决不了。

Document.registerElement API: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/registerElement

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容