mocker-apiの記事少なくて困りました。。。
この記事で何がわかる？
Vue.jsハンズオン「step 13のWeb APIでバックエンドと連携させてみよう。」を参考にしています。
この書籍でVue.jsのクラススタイルを学習していたところ、mocker-apiによるモックサーバーの起動が上手く出来ずかなり困ったので、mocker-apiの公式サンプルを参考に修正しました。
とりあえず動くレベルの修正ですが、修正対応中にググっても参考にできる記事も見当たらなかったのでメモ残します。
なぜモックサーバーを作成するのか？
SPAのデータ取得や保存は、基本的にAPIを使ってサーバー側にリクエストします。
クライアント側が呼び出すweb APIを別途開発する場合は不要になりますが、JSONデータの受け取りやリクエストボディの検証などにmocker-apiを使えば便利かと思います。
mocker-apiリンク
https://github.com/jaywcjlove/mocker-api#readme
トラブルシュート（書籍通りで動かなかった理由。と思われるところ）
・モックサーバーが上手く起動しない根本原因は、特定できていない。
ネットワーク自体の応答がを確認できなかったことから、モックサーバー側に原因があると判断しました。
・書籍と同じバージョンに揃えており、異なる点はvoltaを使ったnodeとnpmのバージョン管理くらい。
nodeが上手く動いてくれてない為、サーバーが起動しない根本原因と考えられたが、根深そう（分からない。。）なので、公式サンプルを参考に、別ポートを使ったモックサーバーの別建に方向転換しました。
修正箇所
・vue.config.tsの修正
本書にあるこのファイルのdevSeverの追加修正を削除。webpack-dev-serverでモックサーバーはしない。
・mock/api-mock.jsの修正
呼び出しコマンドの対象がどうやらindex.jsを呼び出すので、ファイル名をmock/api-mock.js →mocker/index.jsに修正
index.js以外だと起動できなかったです。。。
・package.jsonの修正
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"api": "mocker ./mocker" <<< この行を追加（mockerというディレクトリ内のindex.jsを呼び出す）
},
"mocker": { <<< この行を追加
"port": 8081 <<< この行を追加 ポート番号は任意、vueのポート番号（8080）を避けている
}, <<< この行を追加・plugin/axios.ts
axios.defaults.baseURL = "http://localhost:8081/api"; <<<--- ポート番号はpackage.jsonに設定した番号に合わせる利用上の注意
実際はCORSの設定が必要になってくる。
ローカルホスト間でしか使えないので実際のAPIでは考慮する！！
