yamlで記述した設定情報のうち、APIの口となるURL等必要最低限の情報は初めからVue側に渡しておきたい。しかも vue-cli のデフォルトで生成される
public/index.htmlに……。
さて、これをどうやるかを考えていたのですが、少し試したところ下記のことが分かりました。
.envをルートディレクトリに置いて、VUE_APP_<VAR_NAME>というように頭に「VUE_APP_」を付けた変数名であれば、process.env.<VAR_NAME>でVue.jsのプロウグラム、コンポーネントからアクセス可- コンポーネントの
dataにhoge: process.env.<VAR_NAME>という風に書いておけば通常通りthis.hogeでアクセス可 .env.developmentは開発時のみ、.env.productionはビルド時に有効
index.htmlはejs構文使用可(ファビコン出力に<%= BASE_URL %>という記述があるため)
したがって、下記のようなことが考えられます。
bin/preprocessというJavaScriptの処理プログラムを置いておいて、npm scriptsのserveとbuildのコマンド前にbin/preprocess && vue-cli-service serveという風にしてvue-cliの行程の直前にjs(bin/preprocess)を挟むようにするbin/preprocessの中で- yamlファイルをパース
.env系のファイルに文字列としてyamlの中で必要な情報を出力
後はVue.js側ないし
index.htmlで受け取って処理を行うだけ。これで行けますね。
参考
余談
タイトルとは全く関係ないですが、記事にするほどのボリュームもないので記事の端にメモしておきます。
iOS(iPhone)のSafariのURLバーの色を変更する方法が分かった気がするので、その方法を。
iPhoneの場合だけにURLバーの高さ分だけ空コンテンツを追加して、その背景色を指定すれば良さそうな感じがします。
Androidならば
metaタグの
theme-colorで指定するのですが、iOSのSafariはこうするのか……と感心した次第。
参考
アルム＝バンド