首页 > 其他分享 >使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore

时间:2023-03-24 17:31:50浏览次数:42  
标签:Vue 项目 App IOS 目录 点击 版本 Cordova XCode


打包Vue项目

1.在Webstorm中打开Vue项目,在下面的Terminal中输入:

npm run build

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_ios

2.等待build完成,双击项目,进入菜单选择Reveal in Finder ,打开项目的真实目录

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_App_02

3.找到dist目录,进入

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_cordova_03

4.将dist目录下的static文件夹以及index.html全部复制

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Xcode_04

5.打开cordova项目的真实目录下的www目录,进去后用刚才复制的Vue项目的static以及index.html替换掉Cordova项目下的www目录下的两个文件。

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_App_05

Cordova项目

2.新建完了Cordova项目还要安装具体用法的插件,不再详解。

3.使用Webstorm打开刚才已经替换掉www目录的cordova项目

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Webstorm_06

4.同样打开下面的Teriminal,输入:

cordova build ios

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_ios_07

5.build完成后,到Cordova项目的真实目录下,有个xcodeproject,双击会使用XCode打开

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_cordova_08

 

XCode打包

1.上面用XCode打开后,首先更改构建版本,每次的构建版本是不能相同的,否则无法构建

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_cordova_09

2.然后来到Info下的权限声明,只要是涉及到用户的隐私的权限,都要添加中文提示,而且要人性化,并且要说明使用权限的目的。

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_App_10

3.然后,选择Generic IOS Device,当然也可以选择其他的虚拟手机设备,然后点击左边的小三角进行运行。

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Xcode_11

4.选择为Generic IOS Device,后选择上面的Project下的Archive

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Webstorm_12

5.等待完成后,会有弹窗显示最新的构建版本,选中后点击右边的Upload to App Store

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Webstorm_13

6.点击next

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_App_14

7.点击next

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Webstorm_15

8.点击upload

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_App_16

9.等待upload完成

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Webstorm_17

10.出现下面页面则成功,然后点击向右的小箭头,进入到App Store的提交审核页面

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_Webstorm_18

App Store提交审核

1.如果提示找不到账户之类的问题,尝试重启XCodde。

2.点击小箭头跳转并登录后,如果获取不到构建版本或者要更改App 图标请参考:

3.在App  Store的提交审核页面中选择添加构建版本,点击+号或者中文提示的地方,都能选择

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_ios_19

4.选择最新的刚才提交的构建版本,点击完成

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_App_20

5.填写完相关的要填写的信息后,点击存储,再点击提交所有页面审核

使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore_cordova_21

6.根据个人选择发布版本的时间等一些选项,然后等待官方的审核结果。

标签:Vue,项目,App,IOS,目录,点击,版本,Cordova,XCode
From: https://blog.51cto.com/BADAOLIUMANGQZ/6147539

相关文章

  • vue全家桶进阶之路5:DOM文档对象模型
     一、DOM对象DOM,全称“DocumentObjectModel(文档对象模型)”,它是由W3C组织定义的一个标准。在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素......
  • vue全家桶进阶之路4:NPM包
    NPM(NodePackageManager)是Node.js的包管理工具,用来安装各种Node.js的扩展。NPM是JavaScript的包管理工具,也是世界上最大的软件注册表。有超过60万个Jav......
  • 一文详解vue-cli2.0与vue-cli3.0之间的区别
    我们之所以介绍vue-cli2和vue-cli3的使用和区别,是因为VUE脚手架工具从vue-cli3版本开始,在项目结构等诸多方面开始与vue-cli2版本相比,有较大的优化与调整。因此,在学习和工......
  • SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图
    场景若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用Ele......
  • SpringBoot+Vue+Echarts实现双柱体柱状图
    场景 若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用E......
  • SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
    场景SpringBoot集成OpenOffice实现doc文档转html:SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-在上面初步使用了OpenOffice之后,怎样实现文档管理,......
  • Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
    场景Vue+Openlayer使用Draw实现交互式绘制线段:Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-在上面的基础上实现的交互式绘制线段,还可以实现绘制多......
  • Vue3+vite项目中如何动态导入并创建多个全局组件
    背景实际开发项目中,有些时候我们需要通过全局注册多个自定义组件,但是每个组件都导入一次,将会导致代码很冗余。实现方案customComponents/index.jsconstfiles=impor......
  • 【开发小记】vuex存储用户信息
    今天开发的过程中,遵循前人的经验对用户信息进行了存储。实现这个功能之后,我突然想到vuex本质是什么呢?它为什么要存在,以及它和浏览器的缓存的区别又是什么呢?(第三小节会给出......
  • Vue2响应式原理
    Vue.js基本上遵循MVVM(Model–View–ViewModel)架构模式,数据模型仅仅是普通的JavaScript对象。而当你修改它们时,视图会进行更新。本文讲解一下Vue响应式系统的底层细......