Webpack: Runtime Configuration mechanism built into template
I'm trying to figure out how to setup a runtime configuration for a transpiled bundle... such that a different configuration could be provided for different environments (ie. staging or production) where the same bundle runs but in a different environment.
The simplest I can think of is using the window as my environment and load the values in a static file from my index.html:
/static/env.js
window.environment = {};
window.environment.foo = "foo 1";
window.environment.bar = "foo 2";
window.environment.baz = "foo 3";
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My APP</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="/static/env.js" ></script>
</body>
</html>
Then in my application I can do something like:
const environment = window.environment;
console.log (environment.foo);
console.log (environment.bar);
console.log (environment.baz);
Then a different static/env.js can be loaded via docker -v or overwritten when published with the dist.
Could/should the template support this scenario in some way?
Am I going about this right?
iAlexanderMoon
All 2 comments
Okay I've made some improvements.
I included a settings.js in my src directory and load that and use the spread operator to merge the settings and window.environment
src\settings.js
````
const defaults = {
foobar: 'bar',
foobaz: 'baz'
}
const settings = {...defaults, ...window.environment}
export default settings;
static\env.js only needs to override when necessary
window.environment =
{
foobar: 'barbaz'
}
````
and now the application can
import settings from '@/settings'
console.log(settings.foobar)
console.log(settings.foobaz)
---- output ----
barbaz
baz
This seems to be working.
It would be nice if the static script was injected into the index.html so it could take whatever assetsPublicPath and assetsSubDirectory is set too.
I'm not sure how to go about that.
iAlexanderMoon
on 16 May 2017
I will close this since I don't think we will add anything of the sort to this template.
If you need help with implementing this for yourself, go to forum.vuejs.org or chat.vuejs.org
LinusBorg
on 1 Nov 2017
Related issues
happy760690
路
3Comments
Splode
路
3Comments
divyanthj
路
3Comments
kamaleshsivaraj
路
3Comments
paulgeisler
路
3Comments
Most helpful comment
Okay I've made some improvements.
I included a settings.js in my src directory and load that and use the spread operator to merge the settings and window.environment
src\settings.js
````
const defaults = {
foobar: 'bar',
foobaz: 'baz'
}
const settings = {...defaults, ...window.environment}
export default settings;
static\env.js only needs to override when necessarywindow.environment =
{
foobar: 'barbaz'
}
````
and now the application can
import settings from '@/settings' console.log(settings.foobar) console.log(settings.foobaz) ---- output ---- barbaz bazThis seems to be working.
It would be nice if the static script was injected into the index.html so it could take whatever assetsPublicPath and assetsSubDirectory is set too.
I'm not sure how to go about that.