title: Create new variables like `BASE_URL` to use in index.html with vue-ci-service
body: <p>I'm using vue-cli-service to build a vue app and need to define things like a (not secret) api key - say for Google Maps.</p>
  <p>In index.html I see: <code>&lt;link rel=&quot;icon&quot; href=&quot;&lt;%= BASE_URL %&gt;favicon.ico&quot;&gt;</code></p>
  <p>I'd like to be able to create my own variables like GOOGLE_MAPS_API_KEY and have a different value based on Node's <code>development</code> or <code>production</code> mode.</p>
  <p>I tried <code>.env.development</code> and <code>.env.production</code> files, but I think those are to set VUE environment variables and it's &quot;too late&quot; in the process to render them in the template. I get an error:</p>
  <pre><code>Html Webpack Plugin:
    ReferenceError: GOOGLE_MAPS_API_KEY is not defined
    
    - index.html:8 eval
      [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:8:11
    
  </code></pre>
  <p>How do I inject values from an .env (or other key/value) file into my templates like the BASE_URL - I would like to have a file for each Node <code>mode</code> := <code>development</code> | <code>production</code></p>
  <p>I would like to have this in my index.html file:</p>
  <pre><code> &lt;script
            src=&quot;https://maps.googleapis.com/maps/api/js?key=&lt;%= GOOGLE_MAPS_API_KEY %&gt;&amp;libraries=&amp;v=weekly&quot;
            defer
    &gt;&lt;/script&gt;
  </code></pre>
  <p>How do I do this? I'm not interested in dynamically loading the Javascript at runtime.</p>