Ionic 3 - 应用程序在使用 --prod 构建后显示空白屏幕但使用开发模式
Posted
技术标签:
【中文标题】Ionic 3 - 应用程序在使用 --prod 构建后显示空白屏幕但使用开发模式【英文标题】:Ionic 3 - App shows blank screen after build with --prod but working with development mode 【发布时间】:2020-05-30 03:32:37 【问题描述】:从 app-scripts": "3.1.0" 升级到 "3.1.9" 后,我的应用因 --prod 标志而损坏,我检查了设备控制台,但没有看到任何错误。只是一个空白屏幕。它在没有 --prod 标志的开发模式下完美运行。
这是我的 package.json
"name": "affiliates",
"version": "0.0.232",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"config":
"ionic_webpack": "./src/config/webpack.config.js",
"ionic_generate_source_map": "true"
,
"scripts":
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"serve:test": "MY_ENV=test ionic-app-scripts serve",
"serve:dev": "MY_ENV=dev_docker ionic-app-scripts serve",
"serve:test_local": "MY_ENV=test_local ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js",
"test-ci": "karma start ./test-config/karma.conf.js --single-run",
"test-coverage": "karma start ./test-config/karma.conf.js --coverage",
"e2e": "npm run e2e-update && npm run e2e-test",
"e2e-test": "protractor ./test-config/protractor.conf.js",
"e2e-update": "webdriver-manager update --standalone false --gecko false --versions.chrome 2.44"
,
"dependencies":
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic-native/app-version": "^4.20.0",
"@ionic-native/core": "4.3.2",
"@ionic-native/geolocation": "^4.15.0",
"@ionic-native/native-geocoder": "^4.15.0",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "^2.1.3",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"analytics-node": "^3.3.0",
"brmasker-ionic-3": "^1.0.9",
"cordova-android": "7.1.4",
"cordova-browser": "5.0.4",
"cordova-ios": "4.5.5",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-geolocation": "~4.0.1",
"cordova-plugin-ionic-webview": "^2.3.1",
"cordova-plugin-nativegeocoder": "^3.1.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
"cordova-plugin-whitelist": "^1.3.1",
"cordova-sqlite-storage": "^2.6.0",
"flag-icon-css": "^3.0.0",
"ionic-angular": "^3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-rating": "^1.2.2",
"ionicons": "3.0.0",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"lodash": "^4.17.13",
"moment": "^2.21.0",
"ng-select": "^1.0.1",
"ngx-bootstrap": "^2.0.5",
"ngx-credit-cards": "^1.0.9",
"raven-js": "^3.26.4",
"rxjs": "5.5.2",
"slick-carousel": "^1.8.1",
"sw-toolbox": "3.6.0",
"webpack": "^4.29.6",
"zone.js": "^0.8.21"
,
"devDependencies":
"@ionic/app-scripts": "^3.1.9",
"@ionic/cli-plugin-cordova": "1.6.2",
"@types/jasmine": "2.8.6",
"@types/node": "^10.1.2",
"angular2-template-loader": "^0.6.2",
"html-loader": "^0.5.5",
"ionic": "3.20.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.0",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^3.0.0",
"null-loader": "^0.1.1",
"postcss": "6.0.14",
"protractor": "^5.3.2",
"ts-loader": "^3.5.0",
"ts-node": "^6.0.3",
"typescript": "^2.8.4",
"ws": "3.3.2"
,
"description": "An Ionic project",
"cordova":
"plugins":
"cordova-plugin-device": ,
"cordova-plugin-splashscreen": ,
"cordova-plugin-whitelist": ,
"ionic-plugin-keyboard": ,
"cordova-sqlite-storage": ,
"cordova-plugin-app-version": ,
"cordova-plugin-geolocation":
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
,
"cordova-plugin-nativegeocoder": ,
"cordova-plugin-ionic-webview": ,
"cordova-plugin-statusbar":
,
"platforms": [
"browser",
"ios",
"android"
]
该应用程序没有显示问题,只是一个白屏,我猜是有一些不兼容的插件,但我找不到它在哪里。
【问题讨论】:
【参考方案1】:试着输入
chrome://inspect/#devices
在 chrome 中的导航栏中,然后 ionic cordova 运行 android --prod 这是错误。因此为空值。
如果它不起作用,请尝试将您的 Typescript 降级到 2.8.4。
希望有帮助:)
【讨论】:
以上是关于Ionic 3 - 应用程序在使用 --prod 构建后显示空白屏幕但使用开发模式的主要内容,如果未能解决你的问题,请参考以下文章
Ionic 3 - 使用 --prod 标志运行时,sqlite 显示“无法读取 openDatabase 的属性”的错误
使用“-prod”构建运行时,Ionic 应用程序在启动画面处停止
Ionic Cordova Build prod:找不到模块“。” - 打字稿版本>3
ionic cordova build android --prod 使 JavaScript 堆内存不足