How to organize a default settings file for your Vue app?

Question

Vue.js

It is required in the production version (in the dist folder, compiled by the standard vue-cli) to have a file with settings that the user can easily change and the whole application will work with the new settings.

For example, I tried to create a settings.js file in the public folder:

export const settings = {
  vizEngineIp: '127.0.0.1:61000',
  jsonServerIp: '127.0.0.1:3000',
}

And I import it in the main Vue component: But this way all the settings are baked into the output js. What is the best way to organize a static js file (or json) that will not be baked into the application code, but will remain independent and easy to edit?
import { settings } from '../public/settings.js'

Answer 1

Place the json file in the public folder. Pure json with settings, without any exports.
When the application loads the first page (for example, in the created hook of the App component), it loads this file and applies settings from it.

Answer 2

Write your settings to a global variable and, when building, take out your settings as a separate chunk and connect them before the application script.
Then it will be possible to pick up changes on the fly.

Answer 3

No way. Either use backend or store settings in localstorage