はじめに

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も追加する
これはソースの変更を自動検知して自動ビルドしてくれる最高なやつ

package.json

{
  "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"が大事らしいです

index.html

  <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変数は使えない

App.vue

<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モードにする

router.js

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ライフを〜

Vue CLI 3.0 でCordovaを導入したら割とハマった