您的位置:首页 > 娱乐 > 明星 > uniapp使用vue3打包H5,android或ios加载白屏

uniapp使用vue3打包H5,android或ios加载白屏

2024/12/23 6:54:54 来源:https://blog.csdn.net/xvzhengyang/article/details/139621212  浏览:    关键词:uniapp使用vue3打包H5,android或ios加载白屏

前景介绍

        按照uniapp官方文档介绍,根据步骤创建了使用Vue3的项目;执行命令npm run build:h5,

本地安装了http-server,打包之后的dist文件夹,执行http-server后,可以访问;

       但是使用Android或者ios进行本地加载白屏;以Android为例子,将打包后的文件夹存放到asset文件夹下,使用webview的loadUrl加载;

 val webView = findViewById<WebView>(R.id.webview)val webSettings = webView.settingswebSettings.javaScriptEnabled = truewebSettings.allowFileAccess = truewebSettings.allowContentAccess = truewebSettings.domStorageEnabled = true// 加载本地 HTML 文件val htmlFile = "file:///android_asset/plugin_m1010_01/index.html#pages/index/index" 
// 确保 HTML 文件在 assets 文件夹中webView.loadUrl(htmlFile)

但是调试发现,白屏;查看android-studio发现了如下问题

uniapp  Access to script at 'file:///android_asset/assets/index-WZlAV6YJ.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol 。。。。。。

大致意思就是跨域了;按照网上的教程加了一行代码

webSettings.setAllowUniversalAccessFromFileURLs(true);

重新debug调试,可以正常打开了;

PS:亲测了一下,使用vue2的项目打包成h5,是没有这个问题的;应该是vue3的打包改动引起的;

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com