/
quasarli-xian-ji.html
11 lines (10 loc) · 16.6 KB
/
quasarli-xian-ji.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html><html lang="en-gb"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Quasar历险记 - weiView</title><meta name="description" content="最近有一个新项目，想尝试一下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' /> 也是可以的。参考"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="canonical" href="https://blog.zhangv.com/quasarli-xian-ji.html"><link rel="alternate" type="application/atom+xml" href="https://blog.zhangv.com/feed.xml"><link rel="alternate" type="application/json" href="https://blog.zhangv.com/feed.json"><meta property="og:title" content="Quasar历险记"><meta property="og:site_name" content="weiView"><meta property="og:description" content="最近有一个新项目，想尝试一下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' /> 也是可以的。参考"><meta property="og:url" content="https://blog.zhangv.com/quasarli-xian-ji.html"><meta property="og:type" content="article"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@zhangv"><meta name="twitter:title" content="Quasar历险记"><meta name="twitter:description" content="最近有一个新项目，想尝试一下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' /> 也是可以的。参考"><link rel="stylesheet" href="https://blog.zhangv.com/assets/css/style.css?v=b76681f51e47250dca2295b3a6cac101"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.zhangv.com/quasarli-xian-ji.html"},"headline":"Quasar历险记","datePublished":"2023-03-22T11:00","dateModified":"2023-04-28T13:43","description":"最近有一个新项目，想尝试一下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' /> 也是可以的。参考","author":{"@type":"Person","name":"zhangv","url":"https://blog.zhangv.com/authors/zhangv/"},"publisher":{"@type":"Organization","name":"zhangv"}}</script></head><body><div class="container js-container"><nav class="menu"><ul class="navbar__menu"><li><a href="https://blog.zhangv.com/guan-yu.html" target="_self">关于</a></li></ul></nav><div class="content"><header class="top"><div class="top__item"><a class="logo" href="https://blog.zhangv.com/">weiView</a></div><div class="top__item top__item--right"><button class="menu-toggle js-menu-toggle" aria-label="Menu" aria-expanded="false"><span class="menu-toggle-box"><span class="menu-toggle-inner">Menu</span></span></button></div></header><main class="main"><article class="post"><div class="main__left"><figure class="hero"><img src="https://blog.zhangv.com/media/website/IMG_2271.jpeg" srcset="https://blog.zhangv.com/media/website/responsive/IMG_2271-xs.jpeg 300w, https://blog.zhangv.com/media/website/responsive/IMG_2271-sm.jpeg 480w, https://blog.zhangv.com/media/website/responsive/IMG_2271-md.jpeg 768w, https://blog.zhangv.com/media/website/responsive/IMG_2271-lg.jpeg 1024w, https://blog.zhangv.com/media/website/responsive/IMG_2271-xl.jpeg 1280w, https://blog.zhangv.com/media/website/responsive/IMG_2271-2xl.jpeg 1600w" sizes="(min-width: 1800px) 50vw, (min-width: 900px) 40vw, 100vw" loading="eager" width="4032" height="3024" alt=""></figure><header><h1>Quasar历险记</h1><p><time datetime="2023-03-22T11:00">March 22, 2023 </time>by <a href="https://blog.zhangv.com/authors/zhangv/" rel="author" title="zhangv">zhangv</a></p></header></div><div class="main__right"><div class="post__entry"><p>最近有一个新项目，想尝试一下Quasar，据说是一个很好的hybrid框架，由于之前尝试过用cordova + vuejs 开发hybrid APP，并且体验还不错，恰好Quasar又是基于vuejs，且支持cordova。考虑了一下，就入坑了，没准顺便就升级vuejs3了。开始，还是很和谐的，非常快，Quasar的文档也很赞。</p><p>直到第二天，当我发现发布到testflight上的iOS版本打开是白屏，可是在开发模式下(quasar dev -m ios）时是很正常的呀？由于之前遇到过类似的问题：</p><p>1. vue-router的用了history模式，而不是hash模式</p><p>这个仔细排查，通过（quasar inspect）仔细查看生成的vite配置，非常确定vue-router相关的路径配置是正确的。</p><p>2. 发生了js报错</p><p>打开safari的开发调试工具，查看iOS中的报错，发现是被CORS掉了。很奇怪，之前用cordova时候没有遇到这个问题呀？</p><p>于是看到，在vite构建时会生成js文件并注入到index.html中，其中对js的文件引用采用的方式是" type=module crossorigin "，而这就会触发CORS检查。官方文档是<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html" target="_blank" rel="noopener noreferrer">这么解释</a>的。天真的我，试着写了一个vite插件去删除掉这两个属性，但是却会造成无法使用export关键字的问题。</p><p>也尝试了将build.target改为各种低于es2019的版本，都无效。</p><p>而由于在cordova中是文件系统，这里就会产生一个很无解的情况。</p><p>接下来，只能再尝试一下使用webpack而不是vite去构建（因为有之前的成功项目作为背书），但可能会面临一系列版本冲突，webpack生成的js确实和vite不一样，且引用方式也不同。但是还没有功夫研究区别在哪里，只能考虑是否要用webpack再试试。</p><p>2023-4-28更新<br>采用Quasar的webpack模式初始化项目是可以的。</p><p>又继续调查了一下，在config.xml中加入：</p><div><div><preference name="scheme" value="app" /></div><div><preference name="hostname" value="localhost" /></div><div>也是可以的。<a href="https://www.mathew-paul.nz/posts/cordova-webview-schemes-and-protocols/" target="_blank" rel="noopener noreferrer">参考</a></div></div><footer><div class="post__tag-share"><ul class="post__tag"><li><a href="https://blog.zhangv.com/tags/cordova/">cordova</a></li><li><a href="https://blog.zhangv.com/tags/quasar/">quasar</a></li><li><a href="https://blog.zhangv.com/tags/ji-shu/">技术</a></li></ul><div class="post__share"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html" class="js-share facebook" aria-label="Share with Facebook" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#facebook"/></svg> </a><a href="https://twitter.com/share?url=https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html&via=zhangv&text=Quasar%E5%8E%86%E9%99%A9%E8%AE%B0" class="js-share twitter" aria-label="Share with Twitter" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#twitter"/></svg> </a><a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html&media=undefined&description=Quasar%E5%8E%86%E9%99%A9%E8%AE%B0" class="js-share pinterest" aria-label="Share with Pinterest" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#pinterest"/></svg> </a><a href="https://mix.com/add?url=https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html" class="js-share mix" aria-label="[MISSING TRANSLATION] [MISSING TRANSLATION]" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#mix"/></svg> </a><a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html" class="js-share linkedin" aria-label="[MISSING TRANSLATION] Share with LinkedIn" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#linkedin"/></svg> </a><a href="https://buffer.com/add?text=Quasar%E5%8E%86%E9%99%A9%E8%AE%B0&url=https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html" class="js-share buffer" aria-label="Share with Buffer" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#buffer"/></svg> </a><a href="https://api.whatsapp.com/send?text=Quasar%E5%8E%86%E9%99%A9%E8%AE%B0 https%3A%2F%2Fblog.zhangv.com%2Fquasarli-xian-ji.html" class="js-share whatsapp" title="[MISSING TRANSLATION] Share with LinkedIn" rel="nofollow noopener noreferrer"><svg class="icon"><use xlink:href="https://blog.zhangv.com/assets/svg/svg-map.svg#whatsapp"/></svg></a></div></div><div class="post__bio"><h3><a href="https://blog.zhangv.com/authors/zhangv/" title="zhangv">zhangv</a></h3></div></footer></div></div></article></main><footer class="footer"><div class="footer__copyright">Powered by Publii</div></footer></div></div><script defer="defer" src="https://blog.zhangv.com/assets/js/scripts.min.js?v=27706a8fe221267c1834098c796f44c1"></script><script>var images = document.querySelectorAll('img[loading]');
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
images[i].classList.add('is-loaded');
} else {
images[i].addEventListener('load', function () {
this.classList.add('is-loaded');
}, false);
}
}</script></body></html>