Cordova打包教程知识体系整理（Vue项目打包成ipa）
使用工具：
1.Webstorm2017
???Webstorm2017安裝以及破解和漢化：
???https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82156578
2.Mac book pro+Xcode8
?? 如果Xcode使用中出現(xiàn)問(wèn)題：
??https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82876655
??https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82876899
??https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82875098
3.Node.js
? Node簡(jiǎn)介以及Windows上安裝node:
? https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82903033
? npm介紹以及常用命令：
? https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82904147
4.Cordova
? cordova官網(wǎng)：
? https://cordova.apache.org/
? cordovaW3c教程：
??https://www.w3cschool.cn/cordova/cordova_first_application.html
? cordova創(chuàng)建你的第一個(gè)App:
? https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82964900
? 使用Cordova打包Vue項(xiàng)目為IOS并使用XCoe提交到AppStore:
? https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82967909
Vue教程以及項(xiàng)目搭建
1.Vue教程集錦
https://blog.csdn.net/badao_liumang_qizhi/article/category/8051250
2.打包Vue項(xiàng)目教程
使用Webstorm打開(kāi)你的Vue項(xiàng)目，打開(kāi)右下角Terminal，輸入：
npm run build?
等待build完成，會(huì)出現(xiàn)Build complete頁(yè)面
新建Cordova項(xiàng)目
1.在Node.js安裝完成后，打開(kāi)終端，手動(dòng)輸入命令行來(lái)安裝cordova
sudo npm install -g cordovasudo是給夠權(quán)限，此時(shí)會(huì)讓你輸入Mac密碼，輸入后回車(chē)，-g表示全局安裝
2.安裝成功后，驗(yàn)證是否安裝成功，在終端輸入:cordova,如果輸出命令提示則安裝成功。
3.創(chuàng)建Cordova項(xiàng)目
終端中輸入：
cordova create test-ios com.badao.test test-ios第一個(gè)test-ios是項(xiàng)目名，com.badao.test是包名，或者說(shuō)bundle identifier,第二個(gè) test-ios是應(yīng)用名(可以不和項(xiàng)目名一樣)。
此時(shí)到你的終端打開(kāi)的目錄下會(huì)有這個(gè)項(xiàng)目，并且Cordova項(xiàng)目的目錄結(jié)構(gòu)已經(jīng)搭建好。
Vue項(xiàng)目和Cordova項(xiàng)目整合
1.找到剛才用Webstorm打開(kāi)并build的Vue項(xiàng)目，找到項(xiàng)目真實(shí)目錄下的dist目錄，此時(shí)dist目錄下會(huì)有static目錄以及index.html,將這兩個(gè)文件復(fù)制。
2.找到新建的Cordova項(xiàng)目下的www目錄，此時(shí)www目錄下會(huì)有css、js、img目錄以及index文件，用上面復(fù)制的Vue項(xiàng)目的dist下的兩個(gè)文件替換掉當(dāng)前Cordova項(xiàng)目下的www目錄下的文件（第一次將css、js、img刪掉并替換，以后直接將這兩個(gè)文件替換）。
3.為項(xiàng)目安裝平臺(tái)模塊
上面創(chuàng)建完的Cordova項(xiàng)目，項(xiàng)目名為test-ios,在終端輸入：
cd test-ios進(jìn)入Cordova項(xiàng)目，或者直接找到cordova項(xiàng)目的真實(shí)目錄，選擇在此處打開(kāi)終端，不會(huì)的可自行百度。
進(jìn)入到項(xiàng)目后，終端輸入：
cordova platform add ios或者
sudo cordova platform add ios如果對(duì)ios版本沒(méi)有要求可以這樣添加，如果需要添加指定版本的ios平臺(tái)：
cordova platform add ios@4.5.4當(dāng)hello/www目錄下的網(wǎng)頁(yè)內(nèi)容發(fā)生變化時(shí)，需要刷新生成的工程:
cordova platform update ios4.安裝需要的擴(kuò)展插件
安裝插件一定要注意插件的版本以及插件之間的兼容性。
如果已經(jīng)有過(guò)成功的cordova項(xiàng)目，可以輸入:
cordova plugin list來(lái)查看所有已經(jīng)安裝的插件以及對(duì)應(yīng)版本。
確定好要安裝的插件以及版本后，安裝插件命令為：
cordova plugin add cordova-plugin-camera@2.4.1這里以相機(jī)插件為例，@2.4.1為安裝插件的版本。
如果安錯(cuò)了插件，可以執(zhí)行：
cordova plugin remove 插件名，再重新安裝。
5.添加完平臺(tái)以及安裝完插件后，在終端輸入：
cordova build ios備注：
如果項(xiàng)目用到微信支付以及支付寶支付，在cordova項(xiàng)目的config.xml中加入：
?<allow-intent href="weixin:*" />
?<allow-intent href= "alipays:*" />
Xcode工程編輯
1.找到上面的cordova項(xiàng)目的真實(shí)目錄--platforms--ios下有一個(gè)項(xiàng)目名.xcodeproj文件，雙擊用Xcode打開(kāi)。
2.關(guān)于ios上線流程，可以自行百度，這里可以參考
https://www.jianshu.com/p/6e228ce32ccd
3.如果你是第一次配置ios上線，建議多了解好證書(shū)、描述文件等一些作用以及流程后再上手。
4.這里假設(shè)已經(jīng)配置好了證書(shū)，現(xiàn)在將要進(jìn)行打包ipa或者進(jìn)行模擬器調(diào)試。
5.用Xcode打開(kāi)后，首先找到General下，此時(shí)的Bundle Identifier要和你新建Cordova項(xiàng)目以及在蘋(píng)果開(kāi)發(fā)者中心
(https://developer.apple.com )申請(qǐng)的要一致,每次構(gòu)建版本要修改version以及Build,默認(rèn)是1.0.0,如果是在模擬器中調(diào)試，將Automatically manage signing勾選上 。
繼續(xù)往下拉，找到App Icons Launch Images，來(lái)配置應(yīng)用圖標(biāo)以及應(yīng)用啟動(dòng)圖。
具體參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82875098
6.找到上面Build setting功能欄，往下拉，找到Code Signing Identity
如果是模擬器調(diào)試，要選擇iOS Developer
7.配置info權(quán)限聲明，找到Info功能欄
只要是帶有Privary開(kāi)頭的涉及到權(quán)限的，都要在后面添加權(quán)限聲明，具體參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82876655
8.找到最上面Produvt--Schema--Edit Schema,將Build Configuration修改為Debug
9.配置好上面這些，就可以在模擬器中運(yùn)行項(xiàng)目。
?
10.如果不是要在模擬器上運(yùn)行，而是要上線IOS
首先不要勾選Automaticlly manage signing,然后到Code Signing Identity下將IOS Developer改為在蘋(píng)果開(kāi)發(fā)者中心配置的iPhone Distribute,然后在Edit Schema 中將Debug改為Release。
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的Cordova打包教程知识体系整理（Vue项目打包成ipa）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： You have not accepte
- 下一篇： Vue单文件组件与vue-loader