1,安装cordova

由于之前AngularJS+Ionic时已经安装过cordova,并且安装步骤很简单,这里不再赘述

sudo npm install -g cordova

2,更新cordova

Ionic时cordova明明是好的,现在Vue再用不好使了

1)先查看cordova版本:

    bogon:~ Brave$ sudo cordova -v
    Password:
    6.1.1

2)创建cordova工程

    bogon:~ Brave$ sudo cordova create vueApp org.apache.cordova.hellovue helloVue
    Creating a new cordova project.

    ┌──────────────────────────────────────────┐
    │ Update available: 7.0.1 (current: 6.1.1) │
    │ Run npm install -g cordova to update.    │
    └──────────────────────────────────────────┘

3)按照提示更新cordova版本: 

    bogon:~ Brave$ sudo npm install -g cordova

3,初始化cordova工程:

cordova create 目录名 包名 工程名

bogon:~ Brave$ sudo cordova create vueApp org.apache.cordova.hellovue helloVue
Creating a new cordova project.

4,添加Android,Ios平台Platform

1)进入cordova工程目录(我这里的路径是vueApp)

    bogon:~ Brave$ cd vueApp/

2)添加Android/Ios platform:

    Android : sudo cordova platform add android@latest --save
    Ios     : sudo cordova platform add ios --save

    注意添加platform的方式有很多,建议使用cordova platform add android@latest --save稍后会明原因

    解释一下:
        --save : 添加platform后会自动向cordova工程中的config.xml中添加Android和ios的工程版本号

        @latest : 添加最新版本platform.

save-flag


5,cordova- Android / IOS 开发/运行检查及问题解决

通过cordova requirements来检查是否具备使用 Cordova 开发/运行 Android / IOS 应用条件

bogon:vueApp Brave$ sudo cordova requirements

在这里有可能遇到这样几个让人头疼的问题:

cordova requirements问题

从图上我们发现有这样3个问题,并且不解决了这三个问题Android/Ios是不能build打包App成功的:

1)android SDK找不到,建议是确认已安装或配置环境变量

Cordova-Android-Android target:not installed

2)Gradle找不到,建议是确认已安装或配置环境变量

Cordova-Android-Gradle:not installed

3)Ios平台没有ios-deploy,建议下载并给出了下载命令

cordova-ios-安装ios-deploy

引用的三篇博文是具体解决办法,这里简单总结一下

问题1:Android target: not installed

Android SDK现在基本都是通过Android Stadio进行下载和配置的
我这里的Android环境肯定没有问题,环境变量之前也已经配置过了,为什么提示找不到

就是刚才说的 Android platform 使用: sudo cordova platform add android@latest --save
就算是update platform也不行,只能删除了重新add platform


问题2:Gradle: not installed

注意这个问题了,在Android SDK中没有找到gradle,道理一样,AS会自动帮我们安装(首次创建项目时会下载gradle),所以如果你是使用AS的,按照问题1的解决方法,问题2也会解决
如果不是使用AS下载的gradle,需要配置环境变量


问题3:ios-deploy: not installed

这个问题就有点儿不厚道了,用给的指令仍然不能下载ios-deploy,这个和Mac电脑的系统版本有关系

使用以下指令安装即可:
    sudo npm install -g ios-deploy --unsafe-perm=true

6,Android / IOS Bulid

解决了以上问题,再次检查Android/Ios开发环境,将不会提示错误

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-26,android-25,android-24,Google Inc.:Google APIs:24,android-23,Google Inc.:Google APIs:23,android-22,Google Inc.:Google APIs:22,android-21,Google Inc.:Google APIs:21,android-20,android-19,Google Inc.:Google APIs (x86 System Image):19,android-15,android-14
Gradle: installed /Applications/Android Studio.app/Contents/gradle/gradle-3.2/bin/gradle

Requirements check results for ios:
Apple OS X: installed darwin
Xcode: installed 7.0.1
ios-deploy: installed 1.9.1

现在我们可以Build cordova项目了,简单说一下指令

cordova build android    // 编译项目
cordova emulate android  // 在模拟器中运行程序
cordova server android   // 在浏览器中运行
cordova run android      // 通过USB直接安装到Android 真机上(包含了编译命令)
ripple emulate           // 在模拟器中运行(安装命令 npm install -g ripple -emulater)

我们这里就不演示了 直接 cordova build 编译Android & Ios

bogon:~ Brave$ cd VueWorkSpace/
bogon:VueWorkSpace Brave$ cd vueApp/
bogon:vueApp Brave$ sudo cordova build
Password:
ANDROID_HOME=/Users/Brave/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_51.jdk/Contents/Home
Subproject Path: CordovaLib
Starting a Gradle Daemon (subsequent builds will be faster)
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
at build_b2ffluyxl073rdllpsmvla7to.run(/Users/Brave/VueWorkSpace/vueApp/platforms/android/build.gradle:137)
Observed package id 'build-tools;23.0.0-rc3' in inconsistent location '/Users/Brave/Library/Android/sdk/build-tools/23.0.0_rc3' (Expected '/Users/Brave/Library/Android/sdk/build-tools/23.0.0-rc3')
Observed package id 'build-tools;26.0.0-rc2' in inconsistent location '/Users/Brave/Library/Android/sdk/build-tools/26.0.0-preview' (Expected '/Users/Brave/Library/Android/sdk/build-tools/26.0.0-rc2')
Observed package id 'build-tools;23.0.0-rc3' in inconsistent location '/Users/Brave/Library/Android/sdk/build-tools/23.0.0_rc3' (Expected '/Users/Brave/Library/Android/sdk/build-tools/23.0.0-rc3')
Observed package id 'build-tools;26.0.0-rc2' in inconsistent location '/Users/Brave/Library/Android/sdk/build-tools/26.0.0-preview' (Expected '/Users/Brave/Library/Android/sdk/build-tools/26.0.0-rc2')
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.
Incremental java compilation is an incubating feature.
The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:compileLint UP-TO-DATE
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugShaders UP-TO-DATE
:CordovaLib:compileDebugShaders UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:prepareOrgApacheCordovaCordovaLib623DebugLibrary UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl UP-TO-DATE
:compileDebugRenderscript UP-TO-DATE
:generateDebugBuildConfig UP-TO-DATE
:generateDebugResValues UP-TO-DATE
:generateDebugResources UP-TO-DATE
:mergeDebugResources UP-TO-DATE
:processDebugManifest UP-TO-DATE
:processDebugResources UP-TO-DATE
:generateDebugSources UP-TO-DATE
:incrementalDebugJavaCompilationSafeguard UP-TO-DATE
:compileDebugJavaWithJavac UP-TO-DATE
:compileDebugNdk UP-TO-DATE
:compileDebugSources UP-TO-DATE
:mergeDebugShaders UP-TO-DATE
:compileDebugShaders UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets UP-TO-DATE
:transformClassesWithDexForDebug UP-TO-DATE
:mergeDebugJniLibFolders UP-TO-DATE
:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:processDebugJavaRes UP-TO-DATE
:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:validateSigningDebug
:packageDebug UP-TO-DATE
:assembleDebug UP-TO-DATE
:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL

Total time: 12.272 secs
Built the following apk(s):
/Users/Brave/VueWorkSpace/vueApp/platforms/android/build/outputs/apk/android-debug.apk
Building project  : /Users/Brave/VueWorkSpace/vueApp/platforms/ios/helloVue.xcodeproj
Configuration : Debug
Platform      : emulator
Build settings from command line:
    ARCHS = i386
    CONFIGURATION_BUILD_DIR = /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/emulator
    SDKROOT = iphonesimulator9.0
    SHARED_PRECOMPS_DIR = /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/sharedpch
    VALID_ARCHS = i386

Build settings from configuration file '/Users/Brave/VueWorkSpace/vueApp/platforms/ios/cordova/build-debug.xcconfig':
    CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES
    CODE_SIGN_IDENTITY = iPhone Developer
    ENABLE_BITCODE = NO
    GCC_PREPROCESSOR_DEFINITIONS = DEBUG=1
    HEADER_SEARCH_PATHS = "$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
    IPHONEOS_DEPLOYMENT_TARGET = 8.0
    OTHER_LDFLAGS = -ObjC
    SWIFT_OBJC_BRIDGING_HEADER = $(PROJECT_DIR)/$(PROJECT_NAME)/Bridging-Header.h
    TARGETED_DEVICE_FAMILY = 1,2

=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===

Check dependencies

=== BUILD TARGET helloVue OF PROJECT helloVue WITH CONFIGURATION Debug ===

Check dependencies

PhaseScriptExecution Copy\ www\ directory build/helloVue.build/Debug-iphonesimulator/helloVue.build/Script-304B58A110DAC018002A0835.sh
    cd /Users/Brave/VueWorkSpace/vueApp/platforms/ios
    /bin/sh -c /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/helloVue.build/Debug-iphonesimulator/helloVue.build/Script-304B58A110DAC018002A0835.sh

ProcessInfoPlistFile build/emulator/helloVue.app/Info.plist helloVue/helloVue-Info.plist
    cd /Users/Brave/VueWorkSpace/vueApp/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin::/Users/Brave/mongodb/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin:/Users/Brave/Library/Android/sdk/tools/:/Users/Brave/Library/Android/sdk/platform-tools:/Users/Brave/apache-maven-3.3.3/bin:/usr/local/mysql/bin:/Users/Brave/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3/bin:/Users/Brave/Library/Android/sdk/tools/bin"
    builtin-infoPlistUtility /Users/Brave/VueWorkSpace/vueApp/platforms/ios/helloVue/helloVue-Info.plist -genpkginfo /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/emulator/helloVue.app/PkgInfo -expandbuildsettings -format binary -platform iphonesimulator -additionalcontentfile /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/helloVue.build/Debug-iphonesimulator/helloVue.build/MainViewController-PartialInfo.plist -additionalcontentfile /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/helloVue.build/Debug-iphonesimulator/helloVue.build/assetcatalog_generated_info.plist -o /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/emulator/helloVue.app/Info.plist

GenerateDSYMFile build/emulator/helloVue.app.dSYM build/emulator/helloVue.app/helloVue
    cd /Users/Brave/VueWorkSpace/vueApp/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin::/Users/Brave/mongodb/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin:/Users/Brave/Library/Android/sdk/tools/:/Users/Brave/Library/Android/sdk/platform-tools:/Users/Brave/apache-maven-3.3.3/bin:/usr/local/mysql/bin:/Users/Brave/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3/bin:/Users/Brave/Library/Android/sdk/tools/bin"
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/emulator/helloVue.app/helloVue -o /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/emulator/helloVue.app.dSYM

Touch build/emulator/helloVue.app
    cd /Users/Brave/VueWorkSpace/vueApp/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin::/Users/Brave/mongodb/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin:/Users/Brave/Library/Android/sdk/tools/:/Users/Brave/Library/Android/sdk/platform-tools:/Users/Brave/apache-maven-3.3.3/bin:/usr/local/mysql/bin:/Users/Brave/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3/bin:/Users/Brave/Library/Android/sdk/tools/bin"
    /usr/bin/touch -c /Users/Brave/VueWorkSpace/vueApp/platforms/ios/build/emulator/helloVue.app

** BUILD SUCCEEDED **

Build成功!
至此,cordova的安装,更新及工程bulid问题的分析和解决,简单说了一下,希望可以帮助大家

还需要注意的一个问题,即使本地已经安装了Gradle,Cordova还是会再去下载,并且这里需要翻墙

Logo

前往低代码交流专区

更多推荐