前景介绍
按照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的打包改动引起的;