[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vue透過ionic部署ios-app的幾點筆記":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},170,"vue透過ionic部署ios-app的幾點筆記","[Vue]透過ionic部署ios app的幾點筆記","透過ionic部署ios app的幾點筆記 ionic可以直接透過指令來部署android \u002F ios的app […]","\u003Ch1>透過ionic部署ios app的幾點筆記\u003C\u002Fh1>\n\u003Cp>ionic可以直接透過指令來部署android \u002F ios的app，這篇筆記一下部署過程遇到的一些問題。基本上還是透過Capacitor(似乎基還是cordova)實現跨平台部署，ionic裡面已經包你先包裝好了。流程指令可以參考\u003Ca href=\"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Fvue\u002Fyour-first-app\u002Fdeploying-mobile\" title=\"此篇\">此篇\u003C\u002Fa>。\u003Cbr \u002F>\n首先先打包專案\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ionic build\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>選擇要部署的裝置類型，因為這次是ios的實作所以使用了ios的指令\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ionic cap add ios\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>注意喔，官方文件有說明\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>Every time you perform a build (e.g. ionic build) that updates your web directory (default: build), you'll need to copy those changes into your native projects:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>因為cordova會將你的「網頁」專案放一份到app專案裡面，所以有內容更新要下此指令\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ionic cap copy\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>Note: After making updates to the native portion of the code (such as adding a new plugin), use the sync command:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>或是使用同步指令，老實說我不確定兩者有什麼差異，這部分還得研究一下\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ionic cap sync\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>到這邊後，要開始設定ios上的細節，部署ios一定得透過xcode，輸入指令打開xcode\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ionic cap open ios\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在xcode中，找到以下畫面\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F10%2F%E6%88%AA%E5%9C%96-2022-10-29-%E4%B8%8B%E5%8D%889.03.11.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n\u003Cem>signing & capabilities\u003C\u002Fem>中設定\u003Cem>Team\u003C\u002Fem>和\u003Cem>Bundle Identifer\u003C\u002Fem>要設定，這邊基本上有設定好，就可以按xcode左上角的三角形進行編譯看看有沒有bug，若有就看log來除錯\u003Cbr \u002F>\n還不太懂的話可以參考\u003Ca href=\"https:\u002F\u002Fwww.cnblogs.com\u002Fchunzhulovefeiyue\u002Fp\u002F7512853.html\" title=\"此篇\">此篇\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3>live demo\u003C\u002Fh3>\n\u003Cp>到這邊成功的話，會發現專案中出現了ios資料夾，進入ios資料夾，可以進行live demo，將ios裝置接上mac\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ionic cap run ios -l --external\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這時應該可以在指令中看到自己的ios裝置名稱來進行部署，成功的話就能在ios裝置上看到自己的app囉\u003C\u002Fp>\n\u003Ch3>遇到問題\u003C\u002Fh3>\n\u003Cp>\u003Cem>Cocoapods No  'Podfile' found in the project directory.\u003C\u002Fem>\u003Cbr \u002F>\nCocoapods應該是Objective-C與Swift上使用的一種什麼東西，但我目前還不懂他是什麼XD\u003Ca href=\"https:\u002F\u002Fwww.appcoda.com.tw\u002Fcocoapods\u002F\" title=\"參考\">參考\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>查了一下，解決方式很簡單，輸入以下三個指令就好\u003C\u002Fp>\n\u003Cpre>\u003Ccode>pod init\n\nopen Podfile\n\npod install\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但沒這麼容易XD我遇到了一些錯誤，這邊推薦老方式，重裝cocoapods(啊哈)\u003C\u002Fp>\n\u003Cpre>\u003Ccode>gem uninstall cocoapods\nbrew install cocoapods \u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>到這邊我就順利成功建立了cocoapods的podfile\u003C\u002Fp>\n","2022-12-14T14:00:52","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F09%2Fframework_ionic.jpeg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fvue透過ionic部署ios-app的幾點筆記",1]