cordova打包vue2（webpack）android、ios app

使用cordova打包vue2（webpack）app for android ios
一、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加入以下標籤，不讓他放大縮小

<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

 

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文件夾下。

二、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整合已經成功了。

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

使用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圖表就算完成了。至於歡迎頁，和這步驟同樣，只不過第一步選擇的時候，要選擇橫屏仍是豎屏。若是看完這個操做失敗了，不要灰心，再來一次，若是仍是失敗了，點擊查看視屏教程--------------------- 做者：碼農筆錄 來源：CSDN 原文：https://blog.csdn.net/yp090416/article/details/75367154 版權聲明：本文爲博主原創文章，轉載請附上博文連接！