I am trying to figure out how to deploy my vue app that was generated with vue-cli 3 to production. I plan on hosting it as static files (that is no server side code). I need to set certain variables in my code based on the current environment (dev vs production). These include api-urls and authentication information (none of which is secret).
What is the best way of doing this?
Here are the config docs for vue-cli 3: https://cli.vuejs.org/config/
You can just add your variables to existing DefinePlugin config with chainWebpack:
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
args[0] = {
...args[0],
"MY_API_URL": JSON.stringify(process.env.URL),
// other stuff
}
return args
})
}
}
And configure environment variables in .env.
You have to start the variable names with VUE_APP (https://cli.vuejs.org/guide/mode-and-env.html)
To make the config values part of process.env a slight update to Max Sinev's answer would be
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin("define").tap(args => {
let _base = args[0]["process.env"];
args[0]["process.env"] = {
..._base,
"API_URL": JSON.stringify(process.env.URL),
};
return args;
});
}
}
Now API_URL can be accessed as precess.env.API_URL
API_URL
DefinePlugin. (webpack.js.org/plugins/define-plugin)