quasar (1)

Quasar历险记

最近有一个新项目,想尝试一下Quasar,据说是一个很好的hybrid框架,由于之前尝试过用cordova + vuejs 开发hybrid APP,并且体验还不错,恰好Quasar又是基于vuejs,且支持cordova。考虑了一下,就入坑了,没准顺便就升级vuejs3了。开始,还是很和谐的,非常快,Quasar的文档也很赞。 直到第二天,当我发现发布到testflight上的iOS版本打开是白屏,可是在开发模式下(quasar dev -m ios)时是很正常的呀?由于之前遇到过类似的问题: 1. vue-router的用了history模式,而不是hash模式 这个仔细排查,通过(quasar inspect)仔细查看生成的vite配置,非常确定vue-router相关的路径配置是正确的。 2. 发生了js报错 打开safari的开发调试工具,查看iOS中的报错,发现是被CORS掉了。很奇怪,之前用cordova时候没有遇到这个问题呀? 于是看到,在vite构建时会生成js文件并注入到index.html中,其中对js的文件引用采用的方式是" type=module crossorigin ",而这就会触发CORS检查。官方文档是这么解释的。天真的我,试着写了一个vite插件去删除掉这两个属性,但是却会造成无法使用export关键字的问题。 也尝试了将build.target改为各种低于es2019的版本,都无效。 而由于在cordova中是文件系统,这里就会产生一个很无解的情况。 接下来,只能再尝试一下使用webpack而不是vite去构建(因为有之前的成功项目作为背书),但可能会面临一系列版本冲突,webpack生成的js确实和vite不一样,且引用方式也不同。但是还没有功夫研究区别在哪里,只能考虑是否要用webpack再试试。 2023-4-28更新 采用Quasar的webpack模式初始化项目是可以的。 又继续调查了一下,在config.xml中加入: <preference name="scheme" value="app" /> <preference name="hostname" value="localhost" /> 也是可以的。参考