Vue.js - want to lazy load config.json, instead of including at compile time

Question

I'm trying to create a file like the appsettings in a web.config in my vue app, that my vue app can use to load config info at runtime that changes form one deployment level to another (dev/qa/prod)

I'm loading it thusly

Vue.prototype.$config = require('/public/config.json')

but when I look at the transpiled output, it has the values of the file loaded in and hardcoded, not code to load from the file

in app90117256.js: (and js.map)

t.exports = JSON.parse('{""name":"value" etc.....

How do I get it to load the file at runtime instead.

Michal Levý · Accepted Answer · 2021-08-27 21:28:54Z

2

If you want to load the config at runtime, do not use build time constructs, which require or import (or Vue CLI ENV variables) are...

Options:

use either XHR or fetch browser API to request the json file from the server during (or before) your app starts
transform the json into JS file which assigns some global variable (window.appConfig for example), load it using <script> placed in index.html (before your app bundle) and then access it using window.appConfig from the app

answered Aug 27, 2021 at 21:28

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - want to lazy load config.json, instead of including at compile time

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related