Vue CLI 3のindex.htmlでif文を使い本番環境とその他で出し分けする

Vue CLI 3でのindex.htmlはVueのテンプレートシンタックスは使えませんが、webpackのものは使えます。アニメのからくりサーカスでしろがねが林原めぐみでびっくりしましたが文句なしのクオリティでした。

主に使うのは環境変数になると思いますが、下記のような書き方になります。

表示

<%=  process.env.VAR_NAME %>

その他のJavaScript（if、forなど）

<% if (process.env.CAYENNE && process.env.AOYAMA) { %>
うわぁ頑張ろう
<% } %>

詳しくは下記
cli.vuejs.org

今回、本番環境でのみAnalyticsなどを挿入しているGoogle Tag Managerのタグを出し、その他の環境（開発、ステージング）の時は検索除けを入れておくというのをしたかった。

下記の感じで動いた。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <% if (process.env.VUE_APP_MODE==='production') { %>
    <!-- Google Tag Manager -->
    <!-- 省略-->
    <!-- End Google Tag Manager -->
    <% } else { %>
    <meta name="robots" content="noindex, nofollow" />
    <% } %>
<!-- 省略 -->

GTMやGoogle AnalyticsでIP制限もできそうだけど、モバイル回線は除くの難しいし、そもそもタグが入ってなければ確実。
でもGTMでアプリの動作に必要なもの読み込んでる場合は使えないかも。

Vue.jsとFirebaseのアプリで環境切り替えについてや、NODE_ENVではなく、なぜ自分で定義したVUE_APP_MODEを使うのか詳しくは下記記事。

uyamazak.hatenablog.com