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

# はじめに
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を読み込む

```html
<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',
})
```

## 実機で起動

```bash
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がないって言われた時の対処法](https://qiita.com/sakyoyuto/items/1edf9b7289d543a21761)

で、本来は

```bash
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はそのまま

```bash
cordova build android
cordova run android
```
で起動できます

## おわりに

かなり調べたので多分上のどれかで大概の問題は解決するはずです。

それでは良きVue&Cordovaライフを〜