ionic+vue+capacitor项目中集成Capacitor，添加android，ios平台，真机运行项目

Capacitor是什么？
Capacitor是由ionic团队开发的一款跨平台移动应用构建工具，可轻让我们轻松的构建Android、iOS、Electron和Web应用程序。
Capacitor是Apache Cordova和Adobe PhoneGap的继承者，不仅可以把我们用html css js写的代码打包成原生app，还可以让我们使用js调用手机上面原生的Api。目前Capacitor已经成为Ionic应用程序的默认打包工具，你可以继续选择使用cordova或者尝试使用Capacitor。Capacitor官方不仅给我们提供了常见的Api插件，还提供了Cordova兼容层，允许我在Capacitor项目中使用现有的Cordova插件。

1、在我们的Ionic项目中(vue angular react都可以)集成Capacitor（如果执行此命令则直接跳到第三步骤）

ionic integrations enable capacitor

2、从开始搭建一个ionic+vue的工程

安装ionic/cli
pnpm install -g @ionic/cli

如果以前安装过 ionic cli，则由于包名称发生更改，需要将其卸载
pnpm uninstall -g ionic
pnpm install -g @ionic/cli

ionic start
或者
ionic start 项目名称 blank(模板名称)
执行后有如下步骤：
a.Use the app creation wizard?(是否使用应用程序创建向导？) Y 界面化操作（需要有ionic账号） N 自定义创建
b.Framework（选择框架）：React Angular Vue
c.Project name（项目名称）：xxxx
d.Starter template: (Use arrow keys)（选择初始化模板）：tabs（tab页）、sidemenu（侧菜单页）、blank（空白页）、list（列表页）
e.Create free Ionic account?（是否需要创建免费的Ionic帐户？）

终端命令行到 当前项目地址
ionic serve（可以直接在浏览器中打开）

2.1、集成Capacitor

创建capacitor电容器
pnpm init @capacitor/app
执行后有如下步骤：
a.What is the name of your app?(app名称)：xxxxxx
b.What directory should be used for your app?(应用程序应该使用哪个目录)：xxxxxx
c.What should be the App ID for your app?(应用程序的id)：默认为com.example.app

安装capacitor工具包，方便后面项目中使用到一些插件，比如相机等，如果创建capacitor时已经有了就不用安装了
pnpm i @capacitor/core
pnpm i -D @capacitor/cli

这一步注意了，capacitor.config.ts文件中webDir的指向时web前端工程目录的指向，且该目录下必须有一个index.html才行，否则初始化时会报错。这里我选择打包web工程，将webDir的执行为打包后的路径，./dist-ionic

初始化capacitor
npx cap init
执行后有如下步骤：
Name(这将是出现在应用商店中的名称)：默认为创建容器时的名称
Package ID(应用程序包id)：默认为创建容器时的id

3、添加android，ios平台

pnpm install @capacitor/android
pnpm install @capacitor/ios
为本机应用程序创建 Android 和 iOS 项目
npx cap add android
npx cap add ios

4、编译vue项目

ionic build 或 pnpm run build

 5.将静态资源与capacitor同步

npx cap copy

6、android studio中运行

npx cap open ios
npx cap open android

7.初次使用，需要用这个命令来同步项目

ionic capacitor sync android 或 npx cap sync

打开android studio后，通常安卓会自动下载依赖

8、运行真机项目

参考资料：https://note.youdao.com/s/9VcLEZoo 
更多关于capacitor或者避坑请看参考资料，参考资料后续会一直更新