Production build hangs on a white screen

[evinkuraga]

So I ran these 2 commands: $ npm run cordova-build $ cordova build android --release

I've then uploaded the signed apk to google. Once I install the app on my device, it shows the loading screen, then once the app is ready switched to a blank white screen. I'm a bit puzzled about how to fix this.

Thanks!

[evinkuraga]

After putting a full day of research into debugging this, I found out what caused it and how to fix it. For those of you who are using environment variable (.env, .env.local, .env.production, .env.development.local, etc);

The browser preview works fine, but when compiling to an apk and running it on a device (emulated or not), it will hang on a white screen UNLESS you have the exact same parameters in each document.. Really not sure why this is happening, but here's an example of something that would work:

If your .env file contains the following:

VUE_APP_BASE_URI=https://myapp.test/
VUE_APP_DEBUG=false
NODE_ENV=production
VUE_APP_RECAPTCHA=klsdjkjdifoj23@5290xcskjckjhkjh209ufdiofj

Then both your .env.production[.local] and .env.development[.development] would need to contain each of those lines. The values can be changed. IE:

VUE_APP_BASE_URI=https://myapp.com/
VUE_APP_DEBUG=true
NODE_ENV=development
VUE_APP_RECAPTCHA=2389fsud9udkjkjkjhfe92u3iu5u98fjwejf

If either of these files has a missing line OR an extra line, it will likely trigger the issue and hang on the blank screen.

[m0dch3n]

by default, cordova opens file://android_asset/www/index.html

In development mode, this plugin replaces the index.html to redirect to your dev webpage on LAN, where everything is served by http and working well

In a build release, all the files are locally on the device, meaning, your startpage is still file://android_asset/www/index.html, but there is no longer a redirect to working external page. The page normally stays white, when vue is not properly initialised. This is the case, if your javascript paths are correct. i.e. /vendor.js ist file://vendor.js and not file://android_asset/www/vendor.js...

To avoid this, put baseUrl: '' in your vue.config.js and make sure, that in your src/* files, your src="" in img etc are all relative...

I think VUE_APP_BASE_URI=https://myapp.com/ is doing the same trick, except, the your app shows the index.html locally from file://android_asset/www/index.html, and all the scripts, images etc, from https://myapp.com/ and not file://android_asset/www/

This may cause CORS problems etc