Vue-cli 3系の public/index.html に外部変数を喰わせる

yamlで記述した設定情報のうち、APIの口となるURL等必要最低限の情報は初めからVue側に渡しておきたい。しかも vue-cli のデフォルトで生成されるpublic/index.htmlに……。

さて、これをどうやるかを考えていたのですが、少し試したところ下記のことが分かりました。

  • .envをルートディレクトリに置いて、VUE_APP_<VAR_NAME>というように頭に「VUE_APP_」を付けた変数名であれば、process.env.<VAR_NAME>でVue.jsのプロウグラム、コンポーネントからアクセス可
    • コンポーネントのdatahoge: process.env.<VAR_NAME>という風に書いておけば通常通りthis.hogeでアクセス可
    • .env.developmentは開発時のみ、.env.productionはビルド時に有効
  • index.htmlはejs構文使用可(ファビコン出力に<%= BASE_URL %>という記述があるため)

したがって、下記のようなことが考えられます。

  • bin/preprocessというJavaScriptの処理プログラムを置いておいて、npm scriptsservebuildのコマンド前に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はこうするのか……と感心した次第。

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。