Cordova打包教程知识体系整理（Vue项目打包成ipa）

使用工具：

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。