2019-08-26に投稿

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" />

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント