tag:crieit.net,2005:https://crieit.net/tags/VueCLI/feed Crieitでタグ「VueCLI」に投稿された最近の記事 2019-08-26T09:39:34+09:00 https://crieit.net/tags/VueCLI/feed tag:crieit.net,2005:PublicArticle/15351 2019-08-26T09:39:34+09:00 2019-08-26T09:39:34+09:00 https://crieit.net/posts/Vue-CLI-HTML <p>Vue CLIを使ったことがある人なら知っていると思うが、プロジェクトの中には<code>public/index.html</code>というファイルがあり、最終的にビルドされる際はそれが整形されてブラウザ上では表示される。</p> <p>faviconの記述を見ると</p> <pre><code class="html"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> </code></pre> <p>のようになっており、変数の埋め込みもできることが分かる。これについては一応下記に説明ページがある。</p> <p><a target="_blank" rel="nofollow noopener" href="https://cli.vuejs.org/guide/html-and-static-assets.html">HTML and Static Assets | Vue CLI</a></p> <p>ただ正直ここを見ても、どうやって表示したい変数を追加するのかがよく分からない。OGP等はURLのフルパスを書かなきゃいけないのでBASE_URLのプロトコル無しのURLだと困る。試しに適当に追加してみてもエラーになるだけで表示されない。</p> <p>ではどうするかというと、Vue CLIに環境変数を追加する際には<code>VUE_APP_</code>というprefixをつける、というルールがあるので試しにその形に揃えた環境変数を追加してみたところ正常に表示された。</p> <p>たとえば<code>.env.local</code>に</p> <pre><code>VUE_APP_URL=http://localhost:8080 </code></pre> <p>と書き、index.htmlに</p> <pre><code class="html"> <meta property="og:image" content="<%= VUE_APP_URL %>/images/card.png" /> </code></pre> <p>とするとブラウザで閲覧したときも正常に</p> <pre><code class="html"><meta property="og:image" content="http://localhost:8080/images/card.png" /> </code></pre> <p>のように表示される。本番でも試したが特に問題なさそう。</p> だら@Crieit開発者