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.
5,cordova- Android / IOS 开发/运行检查及问题解决
通过cordova requirements来检查是否具备使用 Cordova 开发/运行 Android / IOS 应用条件
bogon:vueApp Brave$ sudo 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,建议下载并给出了下载命令
引用的三篇博文是具体解决办法,这里简单总结一下
问题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还是会再去下载,并且这里需要翻墙