Vue-Cli整合至Cordova(一)

Cordova主要是將開發好的靜態Web頁面打包至APP，同時也支援各個平台。(Android、IOS、Windows..等等)

以往Web開發者，會另外開啟一個專案，再將build後的靜態產出，放進Cordova專案。

例如Vue開發者可以利用vue-cli建立一個singpage專案，build後再將dist的產出copy到Cordova專案中

如果你懶得這麼做，或許可以自己寫一個自動化，但是即使這樣還是得分別放置兩個專案(Web & Cordova)

實際上是可以直接將兩個專案合併成一個，開發上將非常方便，以下將介紹Vue專案整合至Cordova專案包中

首先建立一個Cordova專案

安裝cordova

安裝詳細可以參照我的這篇文章使用Cordova包裝你的Web，建立你的第一個APP

建立一個Cordova專案

1
cordova create [專案名稱]

以Android為例，我們先建立Android平台

1
2
cd [專案名稱]
cordova platform add android

先試試是否可以成功發布

1
cordova build

成功會產出 [專案名稱].apk

或者可以接上設備，直接發布到設備上

1
cordova run

到這裡為止，代表你的Cordova專案與環境都沒有問題，接下來我們將整合Vue-cli專案

用Vue-cli建立專案並整合至Cordova

首先在cordova專案中，用vue-cli建立vue專案

1
2
cd [專案名稱]
vue init webpack [web專案名]

安裝必要套件

1
2
cd [web專案名]
npm i

接下來開始整合專案，以cordova來說，會把cordova/www中的資料打包至app，所以只要將vue專案build後的dist導入至cordova/www就可以很方便的使用，為了達到這目的，我們需要修改vue專案中的輸出目的

修改vue專案的 config/index.js

1
2
3
4
5
6
build: {
    ...
    index:path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www/'),
    assetsPublicPath: './',
    ...

修改以上3個欄位，目的就是把build後的目標更改為 cordova/www

在vue的 index.html 中增加 cordova 掛件

1
<script src="cordova.js"></script>

為了方便輸出，我們在package.json增加一個命令

1
2
3
4
5
...
 "scripts": {
    ...
    "android": "npm run run && cordova run"
  },

試著接上手機，執行編譯

1
npm run android

完成後就可以看到手機上的畫面!

p.png

已經成功整合兩個專案