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 piled 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.

Is it possible to do this?

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 piled 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.

Is it possible to do this?

• javascript
• typescript
• vue.js
• electron-builder
• vue-cli-3

Share Improve this question Follow edited Jan 24 at 15:45 stack145 asked Oct 3, 2018 at 15:26 stack145stack145 12311 silver badge88 bronze badges 3

• Can't you place the .json file in the public folder and import it during the initialization process of your app? e.g (load json when app gets mounted) – funkysoul Commented Dec 6, 2018 at 11:22
• Were you ever able to get your config.json working? I'm trying to use this same technique for configuring static Vue.js websites hosted by AWS S3 without piling AWS stack specific environment variables into the minified javascript code, but so far I haven't been able to avoid pile-time minification of the variables in my static config.json. – Ian Downard Commented Dec 24, 2019 at 4:42
• It appears to me that any variables in the JavaScript, whether in a Vue file directly or imported, are piled before the website is built and can't be changed afterwards. The results of API calls can be dynamic, so my solution was to keep the variables somewhere that can be targeted with an API call. In my case I created a .NET Core web API and kept my variables in that layer, and accessed them through a controller using axios in my Vue project. – stack145 Commented Dec 25, 2019 at 8:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 ponents 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 ponent
          BRAND: BRAND,
          PRINTER_IP: json.printerIP
        }
      },
    });