---
tags: 網頁框架轉手機app
---
# ♨ Day 0 Vue轉手機app(Cordova + VUE)
###### tags: `cordova`、`vue`

目標
-------
本範例會以 vue.js 作為 app 畫面的本體，搭配 Cordova 將一個 SPA 網頁應用程式轉換成 手機app 在手持式裝置上使用。

邏輯:
1. 將vue專案中build出來的產物dist，dist資料夾中的所有檔案轉移至cordova專案中的www資料夾中
2. build cordova專案
3. 在手機模擬器上模擬

此範例版本要求:
* vue3.0
* 已安裝android studio，並建立一個新的專案(1.安裝一個新的模擬器2.將此專案的gradle配置在環境變數中)
* java: java version "1.8.0_321"
* jdk: 1.8.0_202，並安置在環境變數(上面的USER和下面的SYSTEM都要放)中
* (非android studio專案)另外安裝的gradle版本: 2021.2.1 (Chipmunk)
* 另外安裝gradle: 7.3.2 ([安裝](https://gradle.org/releases/))
* 環境變數中的配置: 如下
==Path==(1.專案gradle2.另外安裝gradle3.android sdk)
==JAVA_HOME==

npm安裝Cordova
-------

npm install -g cordova

建立Cordova
-------

接著建立一個 app 名字叫 toolset 的 Cordova 專案，資料會建立於在當前目錄下的 toolset-app 資料夾中，並且給予此 app 獨一無二的 com.wasichris.toolset 識別 ID。

cmd中:

cordova create toolset-app com.wasichris.toolset toolset

專案預設自帶 www 資料夾下的範例網頁，也就是 app 內容主體，後續只要把 vue 開發的網頁放入即可。

接著進入cordova專案資料夾中，並透過 platform add 指令於 Cordova 專案中加入指定平台，多數都是針對 ios 及 android 兩大平台，而本範例僅先針對 android 開發(指定@8.0.0)。如果需要移除特定平台，可以使用 cordova platform rm android指令執行；另外如果想要看看目前已經安裝的平台清單，可以使用 cordova platform ls 指令執行。

cmd中

cd toolset-app
cordova platform add android@8.0.0

或ios

cd toolset-app
cordova platform add ios

android版本對照(截至2022/06/10):
[Android各版本对应的SDK及JDK版本要求
](https://blog.csdn.net/j086924/article/details/122866386)

建立 vue 專案
------
先前步驟已經初步將 Cordova 專案建立完成，接著就是要來產生 app 內容主體 vue 專案。先切換至 Cordova 專案目錄下，透過以下指令建立一個名為 toolset 的 vue SPA 專案。

vue create toolset

> 若是單純要開發 app 內容且不牽涉到 app 原生功能時，最好以 toolset 資料夾作為根目錄於 vs code 開啟專案，因為有些插件會去辨識根目錄的 package.json 來釐清 vue 版本，提供不同版本程式碼檢核的差異化 (例如在 vue v3 開始 template 中的第一層允許多個 elements 存在，此時若以 toolset-app 為根目錄開啟後，插件 vetur 會無法分辨版本而顯示錯誤提示，這點需要注意一下)。

剛有提到要將 vue 專案打包的檔案放到 www 資料夾中，因此需要在 toolset 資料夾(vue專案跟目錄)中建立 vue.config.js 檔案來設定 outputDir 路徑；另外由於這個 vue SPA 是運作在手機中，所以相關載入的資源檔路徑都要以相對路徑來獲得，因此在此一併設定 pubicPath 路徑。

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    publicPath: './',
    outputDir: '../www'
}

並且，router/index.js中一定要設定空路徑(path: '/'或path: '')，並且此空路徑的component必須在開頭就先import進來，不能用箭頭函數
其他path都可以用箭頭函數的方式來import component近來

萬事俱備就直接執行建置，而打包後的檔案會被輸出到 Cordova 需要的 www 資料夾中。

npm run build

接著將當前目錄切換至 toolset-app 這個 Cordova 專案下，並開啟android studio的手機模擬器:

建置 android 平台來將 www 資料夾中的新內容部署到 app 上，然後在模擬器中驗證一下。

cordova build android
cordova emulate android

成功將 vue SPA 放入 app 囉！


常見錯誤:
1. android keystore之錯誤: com.android.ide.common.signing.KeytoolException: Failed to read key AndroidDebugKey from store "/home/user/.android/debug.keystore"
解決: 只需要順著報错中的路徑找到debug.keystore文件，將其删除，再次運行時會自動生成一个新的文件。

參考:
* [[cordova] 使用 Vue 與 Cordova 產生 iOS 應用程式](https://dotblogs.com.tw/wasichris/2021/02/05/093906)
* [Cordova + vue 打包安卓(Android) apk 及 Apk版本自動升級及安裝（實時獲取下載進度）](https://www.gushiciku.cn/pl/grgf/zh-tw)
* [cordova+vue 项目打包成APK应用遇到的问题和解决方法](https://blog.51cto.com/u_15127575/2764447)
* [Android Studio 中Failed to read key from keystore的解决办法
](https://www.codeleading.com/article/91905971092/)