Vue CLIのHTMLに独自の環境変数を追加する

Vue CLIを使ったことがある人なら知っていると思うが、プロジェクトの中にはpublic/index.htmlというファイルがあり、最終的にビルドされる際はそれが整形されてブラウザ上では表示される。

faviconの記述を見ると

    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />

のようになっており、変数の埋め込みもできることが分かる。これについては一応下記に説明ページがある。

HTML and Static Assets | Vue CLI

ただ正直ここを見ても、どうやって表示したい変数を追加するのかがよく分からない。OGP等はURLのフルパスを書かなきゃいけないのでBASE_URLのプロトコル無しのURLだと困る。試しに適当に追加してみてもエラーになるだけで表示されない。

ではどうするかというと、Vue CLIに環境変数を追加する際にはVUE_APP_というprefixをつける、というルールがあるので試しにその形に揃えた環境変数を追加してみたところ正常に表示された。

たとえば.env.localに

VUE_APP_URL=http://localhost:8080

と書き、index.htmlに

    <meta property="og:image" content="<%= VUE_APP_URL %>/images/card.png" />

とするとブラウザで閲覧したときも正常に

<meta property="og:image" content="http://localhost:8080/images/card.png" />

のように表示される。本番でも試したが特に問題なさそう。