cordova打包vue2 app

使用cordova打包vue2（webpack）app for android ios 1、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:8080npm run dev# 打包項目npm run build# build for production and view the bundle analyzer reportnpm run build --report

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 在index.html加入如下標籤，不讓他放大縮小

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

1 2

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"

1 2 3

npm run build

1

*注意:打包好的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

1

cordova create cordova-app com.trgis mapp

1

將vue項目中打包後dist目錄下的檔案全部拷貝到cordova項目的www目錄下

cd cordova-app

1

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

cordova platform add ios --savecordova platforms add android --save

1 2 3

這一步完成後，在項目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

1

安裝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圖表就算完成了。至於歡迎頁面，和這步驟一樣，只不過第一步選擇的時候，要選擇橫屏還是豎屏。