cordova打包vue2(webpack)android、ios app

小編:管理員 763閱讀 2022.09.13

使用cordova打包vue2(webpack)app for android ios1、vue項目
  • 通過vue-cli腳手架建立項目,使用webpack進行打包,下邊是一整套命令。
#npm 版本最好是最新的,升級npm,node版本也有要求
npm  i -g npm

# 安裝腳手架
npm install -g vue-cli

#初始化新建項目
vue init webpack vue-app

# install dependencies
# config/index.js 里可以修改端口
npm install

# serve with hot reload at localhost:8080
npm run dev

# 打包項目
npm run build

# build for production and view the bundle analyzer report
npm run build --report
復制
  • 在index.html加入如下標簽,不讓他放大縮小
復制

npm run build打包項目的時候,要修改config/index.js文件,如圖所示assetsPublicPath默認是根路徑,改成當前相對路徑,或者為空也行productionSourceMap用來支持打包后的調試,改為false,打包比較快

打包后的文件會放到項目根路徑下的dist里邊,后邊會用到。

  • 復制文件

因為webpack無法將你的圖片等資源放到合適位置,你運行index.html, 就會發現他請求的圖片地址是css/static/img,所以在package.json加入如下兩條命令。然后修改build命令,讓他壓縮完代碼之后順便執行復制命令,這樣就不用每次動手去拷貝文件了。

"build": "node build/build.js && npm run fixfont && npm run fiximg",
"fixfont": "xcopy %cd%\\dist\\static\\fonts %cd%\\dist\\static\\css\\static\\fonts /s /y /d /e /i",
"fiximg": "xcopy %cd%\\dist\\static\\img %cd%\\dist\\static\\css\\static\\img /s /y /d /e /i"
復制
npm run build
復制

*注意:打包好的index.html不能直接用瀏覽器打開,打包的時候有提示?梢酝ㄟ^ide開發工具將index.html跑起來,看有沒有什么錯誤,我這會提示圖片404找不到,很郁悶他的請求路徑,最后按照他的路徑,吧img放到了css文件夾下。


2、cordova項目

打包好的vue H5項目需要使用cordova來打包成Android和ios項目。支持跨域 cordova官網命令介紹

創建一個cordova項目,app名稱mapp,包名(bundle id)是com.trgis,項目名是cordova-app

npm install -g cordova
復制
cordova create cordova-app com.trgis mapp
復制

將vue項目中打包后dist目錄下的文件全部拷貝到cordova項目的www目錄下

cd cordova-app
復制

打包ios或者android,本人用的是Android環境

cordova platform add ios --save

cordova platforms add android --save
復制

這一步完成后,在項目platforms文件夾下會發現多了文件夾,本人是Android環境,打包后的項目名是android。到這說明vue和cordova整合已經成功了。

3、使用androidstudio打包apk

cordova有提供命令支持編譯apk的命令,但是本人實在受不了那個速度,慢死了。所以才去Androidstudio進行編譯。直接使用as打開cordova項目下platforms里邊的Android項目,會提示你升級gradle版本之類的,最好都升級。用as直接安裝在真機上進行調試,到此Android打包完成,ios本人目前沒有環境,后期會更新帖子。

4、使用xcode8進行打包 —-只能在mac系統上進行
  • 創建ios項目 首先的在mac上安裝node,然后用node安裝codorva,然后新建cordova項目
cordova platform add ios --save
復制
  • 安裝xcode 在appstore里安裝xcode8,如果你的mac系統還沒有更新,還是更新一下,因為xcode8對系統版本有影響。安裝時間可能比較長,建議大家多等一會。安裝好以后,用xcode打開剛才新建的ios項目,或者也可以在ios下面雙擊配置文件,默認會打開xcode,并加載項目。好吧,接下來就要搞一些煩人的操作了,ios就是麻煩。
  • xcode8 修改 app 應用圖表 ios的圖表限制比較嚴格,一般的圖表扔進去,編譯都過不了,這里我們使用App Icon Gear 進行生成icon。在appstore搜索安裝App Icon Gear,免費試用。雙擊打開,按照圖片選擇。

按照圖片選擇好以后,將app的圖表,拖到左邊第一個框,這時候他就就會自動生成

這么多圖片自己替換又不現實,當然也提供批量修改的功能,打開xcode將icon的文件夾,拖到那個綠色箭頭的框里,按照圖片操作,他就會批量替換。

如果發現打包好的圖片不對以后,在這里選擇Appicon,其實就是找剛才生成的那個icon的文件,好了,到這里xcode8修改app icon圖表就算完成了。至于歡迎頁,和這步驟一樣,只不過第一步選擇的時候,要選擇橫屏還是豎屏。

關聯標簽:
亚洲国产欧美图片,亚洲aⅴ在线av,日韩亚洲综合图片视频,日本av精品在线中文