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

ゞ浴缸里的玫瑰 2023-10-18 09:43 131阅读 0赞

### 使用工具： ###

#### 1.Webstorm2017 ####

Webstorm2017安装以及破解和汉化：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82156578][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_82876655]

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82876899][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82876899]

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82875098][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][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82903033]

npm介绍以及常用命令：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82904147][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82904147]

#### 4.Cordova ####

cordova官网：

[https://cordova.apache.org/][https_cordova.apache.org]

cordovaW3c教程：

[https://www.w3cschool.cn/cordova/cordova\_first\_application.html][https_www.w3cschool.cn_cordova_cordova_first_application.html]

cordova创建你的第一个App:

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82964900][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][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82967909]

### Vue教程以及项目搭建 ###

#### 1.Vue教程集锦 ####

[https://blog.csdn.net/badao\_liumang\_qizhi/article/category/8051250][https_blog.csdn.net_badao_liumang_qizhi_article_category_8051250]

#### 2.打包Vue项目教程 ####

使用Webstorm打开你的Vue项目，打开右下角Terminal，输入：

npm run build

![70][]

等待build完成，会出现Build complete页面

![70 1][]

### 新建Cordova项目 ###

1.在Node.js安装完成后，打开终端，手动输入命令行来安装cordova

sudo npm install -g cordova

sudo是给够权限，此时会让你输入Mac密码，输入后回车，-g表示全局安装

2.安装成功后，验证是否安装成功，在终端输入:cordova,如果输出命令提示则安装成功。

![Image 1][]![70 2][]

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][https_www.jianshu.com_p_6e228ce32ccd]

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

4.这里假设已经配置好了证书，现在将要进行打包ipa或者进行模拟器调试。

5.用Xcode打开后，首先找到General下，此时的Bundle Identifier要和你新建Cordova项目以及在苹果开发者中心

([https://developer.apple.com][https_developer.apple.com] )申请的要一致,每次构建版本要修改version以及Build,默认是1.0.0,如果是在模拟器中调试，将Automatically manage signing勾选上 。

![Image 1][]![70 3][]

继续往下拉，找到App Icons Launch Images，来配置应用图标以及应用启动图。

具体参照：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82875098][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82875098]

![Image 1][]![70 4][]

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

如果是模拟器调试，要选择iOS Developer

![Image 1][]![70 5][]

7.配置info权限声明，找到Info功能栏

只要是带有Privary开头的涉及到权限的，都要在后面添加权限声明，具体参照：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/82876655][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82876655]

![Image 1][]![70 6][]

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

![Image 1][]![70 7][]

![70 8][]

9.配置好上面这些，就可以在模拟器中运行项目。

![Image 1][]![70 9][]

10.如果不是要在模拟器上运行，而是要上线IOS

首先不要勾选Automaticlly manage signing,然后到Code Signing Identity下将IOS Developer改为在苹果开发者中心配置的iPhone Distribute,然后在Edit Schema 中将Debug改为Release。

###  ###

###     ###

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82156578]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82156578
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82876655]: 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/82876899
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82875098]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82875098
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82903033]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82903033
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82904147]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82904147
[https_cordova.apache.org]: https://cordova.apache.org/
[https_www.w3cschool.cn_cordova_cordova_first_application.html]: https://www.w3cschool.cn/cordova/cordova_first_application.html
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82964900]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82964900
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_82967909]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82967909
[https_blog.csdn.net_badao_liumang_qizhi_article_category_8051250]: https://blog.csdn.net/badao_liumang_qizhi/article/category/8051250
[70]: https://img-blog.csdn.net/20181015133326490?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181015133343477?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[Image 1]: 
[70 2]: https://img-blog.csdn.net/20181015133403823?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[https_www.jianshu.com_p_6e228ce32ccd]: https://www.jianshu.com/p/6e228ce32ccd
[https_developer.apple.com]: https://developer.apple.com
[70 3]: https://img-blog.csdn.net/20181015133527528?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20181015133535837?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20181015133545103?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20181015133553832?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20181015133558768?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: https://img-blog.csdn.net/20181015133613307?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 9]: https://img-blog.csdn.net/2018101513361795?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70