使用工具：

1.Webstorm2017

???Webstorm2017安裝以及破解和漢化：

???https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82156578

2.Mac book pro+Xcode8

?? 如果Xcode使用中出現問題：

??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簡介以及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官網：

? https://cordova.apache.org/

? cordovaW3c教程：

??https://www.w3cschool.cn/cordova/cordova_first_application.html

? cordova創建你的第一個App:

? https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82964900

? 使用Cordova打包Vue項目為IOS并使用XCoe提交到AppStore:

? https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82967909

Vue教程以及項目搭建

1.Vue教程集錦

https://blog.csdn.net/badao_liumang_qizhi/article/category/8051250

2.打包Vue項目教程

使用Webstorm打開你的Vue項目，打開右下角Terminal，輸入：

npm run build

?

等待build完成，會出現Build complete頁面

新建Cordova項目

1.在Node.js安裝完成后，打開終端，手動輸入命令行來安裝cordova

sudo npm install -g cordova

sudo是給夠權限，此時會讓你輸入Mac密碼，輸入后回車，-g表示全局安裝

2.安裝成功后，驗證是否安裝成功，在終端輸入:cordova,如果輸出命令提示則安裝成功。

3.創建Cordova項目

終端中輸入：

cordova create test-ios com.badao.test test-ios

第一個test-ios是項目名，com.badao.test是包名，或者說bundle identifier,第二個 test-ios是應用名(可以不和項目名一樣)。

此時到你的終端打開的目錄下會有這個項目，并且Cordova項目的目錄結構已經搭建好。

Vue項目和Cordova項目整合

1.找到剛才用Webstorm打開并build的Vue項目，找到項目真實目錄下的dist目錄，此時dist目錄下會有static目錄以及index.html,將這兩個文件復制。

2.找到新建的Cordova項目下的www目錄，此時www目錄下會有css、js、img目錄以及index文件，用上面復制的Vue項目的dist下的兩個文件替換掉當前Cordova項目下的www目錄下的文件（第一次將css、js、img刪掉并替換，以后直接將這兩個文件替換）。

3.為項目安裝平臺模塊

上面創建完的Cordova項目，項目名為test-ios,在終端輸入：

cd test-ios

進入Cordova項目，或者直接找到cordova項目的真實目錄，選擇在此處打開終端，不會的可自行百度。

進入到項目后，終端輸入：

cordova platform add ios

或者

sudo cordova platform add ios

如果對ios版本沒有要求可以這樣添加，如果需要添加指定版本的ios平臺：

cordova platform add ios@4.5.4

當hello/www目錄下的網頁內容發生變化時，需要刷新生成的工程:

cordova platform update ios

4.安裝需要的擴展插件

安裝插件一定要注意插件的版本以及插件之間的兼容性。

如果已經有過成功的cordova項目，可以輸入:

cordova plugin list

來查看所有已經安裝的插件以及對應版本。

確定好要安裝的插件以及版本后，安裝插件命令為：

cordova plugin add cordova-plugin-camera@2.4.1

這里以相機插件為例，@2.4.1為安裝插件的版本。

如果安錯了插件，可以執行：

cordova plugin remove 插件名，再重新安裝。

5.添加完平臺以及安裝完插件后，在終端輸入：

cordova build ios

備注：

如果項目用到微信支付以及支付寶支付，在cordova項目的config.xml中加入：

?<allow-intent href="weixin:*" />
?<allow-intent href= "alipays:*" />

Xcode工程編輯

1.找到上面的cordova項目的真實目錄--platforms--ios下有一個項目名.xcodeproj文件，雙擊用Xcode打開。

2.關于ios上線流程，可以自行百度，這里可以參考

https://www.jianshu.com/p/6e228ce32ccd

3.如果你是第一次配置ios上線，建議多了解好證書、描述文件等一些作用以及流程后再上手。

4.這里假設已經配置好了證書，現在將要進行打包ipa或者進行模擬器調試。

5.用Xcode打開后，首先找到General下，此時的Bundle Identifier要和你新建Cordova項目以及在蘋果開發者中心

(https://developer.apple.com )申請的要一致,每次構建版本要修改version以及Build,默認是1.0.0,如果是在模擬器中調試，將Automatically manage signing勾選上 。

繼續往下拉，找到App Icons Launch Images，來配置應用圖標以及應用啟動圖。

具體參照：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82875098

6.找到上面Build setting功能欄，往下拉，找到Code Signing Identity

如果是模擬器調試，要選擇iOS Developer

7.配置info權限聲明，找到Info功能欄

只要是帶有Privary開頭的涉及到權限的，都要在后面添加權限聲明，具體參照：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82876655

8.找到最上面Produvt--Schema--Edit Schema,將Build Configuration修改為Debug

9.配置好上面這些，就可以在模擬器中運行項目。

?

10.如果不是要在模擬器上運行，而是要上線IOS

首先不要勾選Automaticlly manage signing,然后到Code Signing Identity下將IOS Developer改為在蘋果開發者中心配置的iPhone Distribute,然后在Edit Schema 中將Debug改為Release。

?

?

?

?

?

總結

以上是生活随笔為你收集整理的Cordova打包教程知识体系整理（Vue项目打包成ipa）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。