首页 > 解决方案 > Cordova Vue 显示黑屏已发布 APK

问题描述

在调试模式下一切正常,但是在模拟器和真实设备上生成签名的 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 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'
  ]
}

提前致谢

标签: androidvue.jscordovaapkvuetify.js

解决方案


在我的情况下,使用时出现问题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
});


推荐阅读