はじめに
Vue CLI 3.0にCordovaを導入してみたところいくつかハマりポイントがあったのでメモしておきます
利用したのは以下のライブラリです
https://github.com/m0dch3n/vue-cli-plugin-cordova
環境
vue : 3.4.1
node: 10.16.3
yarn: 1.17.3
cordovaを導入
cordovaを導入する
プロジェクトフォルダ直下で
vue add cordova
最初のsrc-cordovaは何も入力せずにEnter
その後はアプリIDとか入力する
src-cordovaフォルダが作成される
最初はアクセス権エラーになったけど
chmod 777 -R hoge
すれば治った
ビルド先のフォルダをcordovaフォルダに変更する
cordovaのためにdist→じゃなくてsrc-cordova/wwwに出力されるようする
あとbuild-watchも追加する
これはソースの変更を自動検知して自動ビルドしてくれる最高なやつ
{
"scripts": {
"build": "vue-cli-service build --dest src-cordova/www",
"build-watch": "vue-cli-service build --dest src-cordova/www --watch",
}
}
ビルド
npm run build-watch
src-cordova/wwwフォルダが作成されたことを確認する
.gitignoreに
/src-cordova/www
を追加しておこう
（デフォルトで追加してくれよ、、）
以下の作業は全てsrc-cordova直下で行う
XCodeの設定
XCodeでsrc-cordova/platforms/ios/アプリ名.xcodeprojを開く
プロジェクト名のフォルダをクリックしてメインページを表示
General タブ > Signing > Automatically manage signing にチェックが入っていることを確認する
General タブ > Team を選択する
※もちろんこれ以外の方法もたくさんあるので、ご参考まで
metaタグを修正する
public/index.htmlに以下のmetaタグを追加する
（おそらく元々存在しているので厳密には追加ではなく上書きかな）
細かい内容はよく分かってないですが、http-equiv="Content-Security-Policy"が大事らしいです
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' blob:"
/>
...
</head>
cordova.jsを読み込む
<body>
<script src="cordova.js"></script>
...
</body>
bodyタグの中で１番最初に読み込む必要があります
pc起動だと
devicereadyの発火を待つ
この発火前だとcordova変数は使えない
<template>
<div id="app">
<div v-if="deviceready">
<router-view />
</div>
</div>
</template>
<script>
export default {
data() {
return {
deviceready: false
};
},
created() {
window.setTimeout(() => {
if (typeof cordova === 'undefined') {
console.log('on PC')
this.deviceready = true
} else {
console.log('on スマートフォン')
document.addEventListener('deviceready', this.onDeviceReady, false)
}
}, 1000);
},
methods: {
onDeviceReady() {
this.deviceready = true;
}
}
};
</script>
PC起動の場合は永遠にdevicereadyが発火しないので速攻でdevicereadyをtrueにしてます
ios13.2にバージョンアップしたら1000ミリ秒待たないと実行されなくなったので追加した
hashモードにする
historyモードだとエラーになるのでhashモードにする
export default new Router({
# 修正前
mode: 'history',
# 修正後
mode: 'hash',
})
実機で起動
npm run build
cd src-cordova/
cordova build ios
※
以下のエラーが出たら
error: archive not found at path
以下にするとうまくいきます
cordova build ios --buildFlag='-UseModernBuildSystem=0'
参考：Cordovaでinfo.plistもしくはxcarchiveがないって言われた時の対処法
で、本来は
cordova run ios
で起動できるらしいですが僕の環境だとエラーになったので
XCodeを開いてProduct>Runすると起動できました
2019/12/10 追記
どうやらios-deployのバグだったらしく、最新版では直ってました(1.10.0）
npm install -g ios-deploy
参考：https://github.com/ios-control/ios-deploy/issues/411
追記おわり
androidはそのまま
cordova build android
cordova run android
で起動できます
おわりに
かなり調べたので多分上のどれかで大概の問題は解決するはずです。
それでは良きVue&Cordovaライフを〜