[Vuejs]-How to build an external configuration file in Vue.js based on your environment

by

0👍

Unfortunately, this is not like React which supports that out of the box. And since it’s not built-in supported, you have to look into 3rd party solutions.

One of these solutions is: https://github.com/tinou98/vue-12factor

Example: Make the title change on env variable

index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>{{ .TITLE }}</title>
  </head>
  <body>
    <h1>{{ .TITLE }}</h1>
  </body>
</html>

Dockerfile

# Build application
FROM node:alpine as build-stage

WORKDIR /app

# Install package as a separate layer for improved docker caching
COPY package*.json ./
RUN npm install

# Build the application
COPY . .
RUN npm run build


# Runnable image
FROM tinou98/vue-12factor

COPY --from=build-stage /app/dist /srv/http
CMD ["js/*.js", "index.html"] # List file that contain run-time variable

Then build and run the image:

docker build -t vue-12factor-example .
docker run -it --rm -p8080:80 -e TITLE="Changeable title" vue-12factor-example

Now a server is running on port 8080, serving the page with injected environement.

Leave a comment