How can I read values from a static config.json file to TypeScript in a Vue file after running build:electron in Vue CLI 3?

Question

Good afternoon.

I was wondering whether it is possible to add a config.json file to a Vue CLI 3 project that can be read at runtime, both during development and production.

The config.json file will contain some strings the app can use to change content dynamically, such as the video files that are displayed to a user and the IP address of a printer.

// config.json

{
    "brand": "eat",
    "printerIP": "192.168.0.4"
}

I have attempted to place the file in the assets folder and the public folder. I have tried importing it to the script lang="ts" element of App.vue using both import and require statements. I am using the vue-property-decorator.

// App.vue (<script lang="ts">)

const config = require('../public/config.json');

OR

import config from '../public/config.json';

I have accessed the values both by processing it like an API using axios and simply accessing the variables using, for example, config.brand.

// App.vue (<script lang="ts">)

import axios from 'axios';

@Provide() private brand: string = "";

axios
    .get('.config.json')
    .then(response => {
        this.brand = response.data.brand;
    })

OR

this.brand = config.brand;

Unfortunately, the data is only read at build time and compiled into minified JavaScript. This means the app is not updated even if the user updates the variables in config.json after the app is built. I need to be able to access config.json in the build files, update a value and then have the app read the new value at runtime without the need to build the project again. I was wondering if it is possible to do this.

Any help you can provide will be greatly appreciated.

Answer 1

You're right in thinking that you should put runtime configurations under the public/ folder, but don't import them. The import would get resolved during build time and its result would go through webpack. Instead, use fetch to load them via HTTP.

Vue designates the public folder as the place to put static assets that should bypass webpack and simply by copied to dist/. You can access them during runtime with an HTTP request like this:

const getRuntimeConfig = async () => {
  const runtimeConfig = await fetch('/config');
  return await runtimeConfig.json()
}

If you want to use those runtime configurations in multiple Vue components without doing multiple fetches, then do one fetch in the main Javascript file that drives your Vue app (e.g. src/main.js) and share the result via Vue mixins, like this:

  Vue.mixin({
      data() {
        return {
          // Distribute runtime configs into every Vue component
          BRAND: BRAND,
          PRINTER_IP: json.printerIP
        }
      },
    });