Cordova Vue showing a blank screen published APK

Question

Everything works fine in debug mode, but When generating the signed APK, on both emulator and real device, after the splash screen all I have is a blank white screen.

I also checked the Logcat but it does not have any errors even warnings.

Package.json

 {
  "name": "com.XXX.app",
  "displayName": "XXX",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "devDependencies": {
    "cordova-android": "^9.0.0",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-whitelist": "^1.3.4"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-splashscreen": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.XXX.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>XXX</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <!-- this hook will point your config.xml to the DevServer on Serve -->
    <hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="SplashScreenDelay" value="0"/>
    <preference name="AutoHideSplashScreen" value="true"/>
    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="loadUrlTimeoutValue" value="700000" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

thanks in advance

Answer 1

In my case the problem occurred when using mode:'history' and base: process.env.BASE_URL, like below:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

Instead, simply remove aforementioned properties:

export default new Router({
  routes:
  routes
});