Cordova Vue 显示黑屏已发布 APK答案

【问题标题】：Cordova Vue showing a blank screen published APKCordova Vue 显示黑屏已发布 APK
【发布时间】：2020-09-30 07:53:11
【问题描述】：

在调试模式下一切正常，但是在模拟器和真实设备上生成签名的 APK 时，在启动屏幕之后我只有一个空白屏幕。

我还检查了 Logcat，但它没有任何错误甚至警告。

包.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"
    ]
  }
}

配置.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'
  ]
}

提前致谢

【问题讨论】：

是签名版还是未签名版？
我使用的是签名版本，它是使用 jarsigner 生成的。
你在模拟器和真机上的安卓版本是多少？我问这个是因为如果您的目标平台是 Android 6.0 或更低版本，并且您正在使用 vuetify（如标签中所述），您需要转译 vuetify 库，因为无法更新的过时 webview 版本。它还可能导致启动时显示空白屏幕
我测试过的Android版本是9、7和10。
@AtaIravani，我也可以说你的 config.xml 是完全正确的。我想，要解决您的问题，您需要访问您的 移动浏览器控制台（我不确定 Logcat 是否可以显示浏览器错误）。也许some of 这个similar questions 会帮助你。

标签： android vue.js cordova apk vuetify.js

【解决方案1】：

在我的情况下，使用mode:'history' 和 base: process.env.BASE_URL, 时出现问题，如下所示：

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

相反，只需删除上述属性：

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

【讨论】：