Ionic/Capacitor 및 Vue.js로 iOS 앱을 빌드할 수 없음

최근에 저는 Vue.js를 사용하여 기본 앱을 빌드하기 위해 Ionic/Capacitor를 실험하고 있습니다. 하지만 iOS용으로 빌드하고 모든 종속성을 구성하는 데 문제가 있었습니다. 그래서 이를 돕기 위해 이 짧은 가이드를 작성했습니다.


이것은 (내가 이미 테스트했기 때문에 10초 정도 안에 코딩 문제를 해결하는 방법을 배우는 열)의 일부입니다.

기술 스택

Vue는 쉬우면서도 강력한 Javascript 프레임워크로 강력한 웹 앱을 만들 수 있습니다.

Ionic은 HTML, CSS 및 Javascript를 사용하여 원래 모양의 IOS/Android 앱을 빌드하기 위한 인기 있는 플랫폼입니다. 그리고 Ionic 프로젝트와 완벽하게 통합되는 Capacitor를 사용하면 기본 기능과 Ios/Android 지원을 추가하는 것이 매우 간단해집니다.

문제

ionic serve로 브라우저에서 테스트한 샘플 앱을 만든 후 iPhone에 배포할 준비가 되었다고 느꼈습니다.

USB 케이블을 통해 휴대폰을 Mac Mini M1에 연결하고 인식되는지 확인한 다음 Visual Studio Code에서 새 터미널을 실행하고 다음을 입력했습니다.

ionic build
ionic cap add ios

그리고 붐! 명령이 실패했습니다.

zsh: command not found: pod

충족되지 않은 종속성이 있음을 빠르게 인식하고 문서( here 및 here )를 확인하고 일부 온라인 자습서를 따른 후 다시 실행하고 붐... 또 다른 오류가 발생했습니다.

Invalid Podfile file: cannot load such file -- /Users/admin/CapProject/node_modules/@capacitor/ios/scripts/pods_helpers

이런! 작동하는 데 시간이 좀 걸렸으므로 다음 단계를 만들었습니다.

# First, update your OS (at least MacOS 12+)
# this is to ensure the greatest compatibility between Apple Silicon and other libraries

# you will need NodeJS 14 or higher
node --version

# make sure to have the javascript package manager
npm --version

# ionic/cli should be present at this stage because you already built your amazing app
npm install -g @ionic/cli

# install Xcode
# just open the App store and search for it

# make sure you have Xcode Command Line Tools
xcode-select --install

# check the installation with
xcode-select -p
# should appear this /Applications/Xcode.app/Contents/Developer

# Install Cocoapods with Homebrew (do not install it manually using ruby gems as sometimes suggested)
brew install cocoapods

# Now, restart your computer (seriously, this is important!)
restart

# check the installation with
pod --version

# build your project to create a dist folder
ionic build

# add Capacitor IOS support
# this time it should work and it creates an ios folder
ionic cap add ios

# open up your IOS build in Xcode
ionic cap open ios

거의 끝났습니다! 고객을 행복하게 만드세요 ;)

매트