Create new variables like `BASE_URL` to use in index.html with vue-ci-service

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.

In index.html I see: <link rel="icon" href="<%= BASE_URL %>favicon.ico">

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 development or production mode.

I tried .env.development and .env.production files, but I think those are to set VUE environment variables and it's "too late" in the process to render them in the template. I get an error:

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

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 mode := development | production

I would like to have this in my index.html file:

 <script
          src="https://maps.googleapis.com/maps/api/js?key=<%= GOOGLE_MAPS_API_KEY %>&libraries=&v=weekly"
          defer
  ></script>

How do I do this? I'm not interested in dynamically loading the Javascript at runtime.

Solution

.env.development & .env.production can do that - you just have to pay attention to start your variables with VUE_APP_, like VUE_APP_GOOGLE_MAPS_API_KEY.

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.

Source: vuejs.org