Using Environment Variables with Vue.js
Solution 1
Vue.js with Webpack
If you use vue cli with the Webpack template (default config), you can create and add your environment variables to a .env file.
The variables will automatically be accessible under process.env.variableName
in your project. Loaded variables are also available to all vue-cli-service commands, plugins and dependencies.
You have a few options, this is from the Environment Variables and Modes documentation:
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
Your .env file should look like this:
VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value
As noted in comment below: If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded.
Don't forget to restart serve if it is currently running.
Vue.js with Vite
Vite exposes env variables that start with VITE_
on the special import.meta.env
object.
Your .env should look like this:
VITE_API_ENDPOINT=value
VITE_API_KEY=value
These variables can be accessed in Vue.js components or JavaScript files under import.meta.env.VITE_API_ENDPOINT
and import.meta.env.VITE_API_KEY
.
Tip: Remember to restart your development server whenever you change or add a variable in the .env file if it's running.
For more info, please see the Vite documentation for env variables.
Solution 2
If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded.
In the root create a .env file with:
VUE_APP_ENV_VARIABLE=value
And, if it's running, you need to restart serve so that the new env vars can be loaded.
With this, you will be able to use process.env.VUE_APP_ENV_VARIABLE in your project (.js and .vue files).
Update
According to @ali6p, with Vue Cli 3, isn't necessary to install dotenv dependency.
Solution 3
- Create two files in root folder (near by package.json)
.env
and.env.production
- Add variables to theese files with prefix
VUE_APP_
eg:VUE_APP_WHATEVERYOUWANT
-
serve uses
.env
and build uses.env.production
- In your components (vue or js), use
process.env.VUE_APP_WHATEVERYOUWANT
to call value - Don't forget to restart serve if it is currently running
- Clear browser cache
Be sure you are using vue-cli version 3 or above
For more information: https://cli.vuejs.org/guide/mode-and-env.html
Solution 4
In the root of your project create your environment files:
- .env
- .env.someEnvironment1
- .env.SomeEnvironment2
To then load those configs, you would specify the environment via mode
i.e.
npm run serve --mode development //default mode
npm run serve --mode someEnvironment1
In your env
files you simply declare the config as key-value pairs, but if you're using vue 3, you must prefix with VUE_APP_
:
In your .env:
VUE_APP_TITLE=This will get overwritten if more specific available
.env.someEnvironment1:
VUE_APP_TITLE=My App (someEnvironment1)
You can then use this in any of your components via:
myComponent.vue:
<template>
<div>
{{title}}
</div>
</template>
<script>
export default {
name: "MyComponent",
data() {
return {
title: process.env.VUE_APP_TITLE
};
}
};
</script>
Now if you ran the app without a mode
it will show the 'This will get...' but if you specify a someEnvironment1
as your mode
then you will get the title from there.
You can create configs that are 'hidden' from git by appending .local
to your file: .env.someEnvironment1.local
- very useful for when you have secrets.
Read the docs for more info.
Solution 5
A problem I was running into was that I was using the webpack-simple install for VueJS which didn't seem to include an Environment variable config folder. So I wasn't able to edit the env.test,development, and production.js config files. Creating them didn't help either.
Other answers weren't detailed enough for me, so I just "fiddled" with webpack.config.js. And the following worked just fine.
So to get Environment Variables to work, the webpack.config.js should have the following at the bottom:
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Based on the above, in production, you would be able to get the NODE_ENV variable
mounted() {
console.log(process.env.NODE_ENV)
}
Now there may be better ways to do this, but if you want to use Environment Variables in Development you would do something like the following:
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
})
]);
}
Now if you want to add other variables with would be as simple as:
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
ENDPOINT: '"http://localhost:3000"',
FOO: "'BAR'"
}
})
]);
}
I should also note that you seem to need the "''" double quotes for some reason.
So, in Development, I can now access these Environment Variables:
mounted() {
console.log(process.env.ENDPOINT)
console.log(process.env.FOO)
}
Here is the whole webpack.config.js just for some context:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
ENDPOINT: '"http://localhost:3000"',
FOO: "'BAR'"
}
})
]);
}
Related videos on Youtube
Edgar Quintero
Preferred Languages = JavaScipt/TypeScript and Python Preferred Frameworks = Angular and Flask Preferred Area = Frontend
Updated on May 07, 2022Comments
-
Edgar Quintero about 2 years
I've been reading the official docs and I'm unable to find anything on environment variables. Apparently there are some community projects that support environment variables but this might be overkill for me. So I was wondering if there's something simple out of the box that works natively when working on a project already created with Vue CLI.
For example, I can see that if I do the following the right environment prints out meaning this is already setup?
mounted() { console.log(process.env.ROOT_API) }
I'm a kinda new to env variables and Node.
FYI using Vue CLI version 3.0 beta.
-
Phil almost 6 yearsWhich vue-cli template are you using? If Webpack, see vuejs-templates.github.io/webpack/env.html
-
Phil almost 6 yearsAlso, it's not clear what you're asking. Do you have an actual question?
-
Julian Paolo Dayag almost 6 yearsif you are using Webpack. yes
process.env
works for getting environment variables. -
Edgar Quintero almost 6 yearsI created my project with
vue create my-app
andenv
variables aren't working as per the docs you posted @Phil -
Benjamin Poignant over 5 yearsYou must prefix variable with ' VUE_APP_' cli.vuejs.org/guide/mode-and-env.html#example-staging-mode
-
-
Edgar Quintero almost 6 yearsThanks will give it a try. Yes my project was created with the native Vue CLI, as per the docs.
-
Edgar Quintero almost 6 yearswith
vue create my-app
-
Edgar Quintero almost 6 yearsImportant to note: Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.
-
He Wang over 5 yearscan I still use
.env
file without using the vue-cli? -
Yilmaz Guleryuz over 5 yearsOnly variables that start with
VUE_APP_
will be statically embedded which means that if you want to have env-vars accessible on the client side code, then you must useVUE_APP_
as prefix for keys in.env
files -
slowFooMovement over 5 yearsI'm moving toward's Vue CLI 3 for future projects, but ran into the same problem on an App I built with the
webpack-simple
install. I expanded on your logic a little bit here and just created an "else" condition in which I just pass theprocess.env.NODE_ENV
value into the DefinePlugin args. -
Pedro Silva over 5 yearsYap, just like I explained below a few months ago in stackoverflow.com/a/51745622/9661304. Upvotes are appreciated :D
-
Nodira over 5 yearsAaron McKeehan, I did the same addition to my webpack.config as you advised. But, how can I use that variable I wrote for development in my vue component for request beginning?
-
Nodira over 5 years@Aaron McKeehan For example, I added,
if (process.env.NODE_ENV === 'development') { module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"development"', DEBUG_MODE: true, ROOT_API: '"http://localhost:8080/"' } }) ]); }
and in Setting.vue I want to add this ROOT_API variable in my post request: axios .post(ENVIRONMENT_VARIABLE_HERE??/api/users/me/change-password
){...}. Please give me advice, I'm not pro in how webpack works -
ali6p about 5 yearsDoesn't need to add any code to main.js, just use
process.env.VUE_APP_ENV_VARIABLE
Isn't it? -
Pedro Silva about 5 yearsyou need to install dotenv if you don't have and then just use it like that.
-
ali6p about 5 yearsIf the project is created by using Vue CLI 3, no need to use dotenv to get environment variables. Maybe you'd like to add this case to your answer.
-
ali6p about 5 yearsDon't forget to restart serve if it is currently running.
-
Pedro Silva about 5 yearsJust need to use process.env.VUE_APP_ENV_VARIABLE? Is that true?
-
ali6p about 5 yearsYes. After CLI 3
-
Gásten about 5 yearsAnd don't forget to rebuild your project.
-
HWJ over 4 yearsThis should be the only answer to this really nasty issue. Thank you! Pointing out where the root folder is and point 5 and 6 differentiate this from the rest of the answers. Also you need to install dotenv: npm install dotenv, I think. Well done.
-
pabloRN over 4 yearsyes, the docs said .env.[mode] it means any [mode] like 'dev' or 'prod' should works, but, by default it uses env.development and env.production so when you npm run serve it will use env.development and not .env.dev
-
Alex Shink over 4 yearsThis is what I was looking for a very long time. It is simple and understandable to throw values into variables from the command line at startup and later can be used in the application. Without additional libraries and difficulties. Thank you very much! Add for the same as me: 1.
CUSTOM_VAR: JSON.stringify (process.env.CUSTOM_VAR) || "default value"
2. Setting the variable value at run:set CUSTOM_VAR=value && npm run serve
3. Use the variable in the application:console.log (process.env.CUSTOM_VAR)
-
fredrivett over 4 yearsHow is it acceptable that Vue enforces the need of prefixing with
VUE_APP_
for environment variables? I've just started implementing our environment variables and already come across an injected environment variable in prod that I can't change, so now I have to watch for both the localVUE_APP_
prefixed and the production non-prefixed versions. -
fred almost 4 yearsThe key for me was prefixing with
VUE_APP_
in both.env
AND in thefile.vue
-
palaѕн almost 4 yearsImportant to note: We need to prefix all env variables with
VUE_APP_
, except for theNODE_ENV
andBASE_URL
. -
dari0h almost 4 yearsThis works fine for scss files inside vue components. But I'm using Vuetify and it's variables.scss file (vuetifyjs.com/en/customization/sass-variables) and there is just not working. I get SassError: Undefined variable. And ideas?
-
Nassim almost 4 yearsthis is the only answer that worked for me . us the full variable name ...` title: process.env.VUE_APP_API_URL `
-
christostsang over 3 yearsAlways forgetting to restart the server!
-
Nguai al over 3 yearswhen you say 'restart serve', are you referring to web server?
-
ali6p over 3 years@Nguaial I mean, re-run the serve script
npm run serve
... or different cmd that depends on your setup. -
Narxx over 3 yearsThis is the best answer here, to be honest. I didn't even need an
.env.development
like other recommended here, just use.env
as my dev configuration file. -
Renan Coelho about 3 yearsThank you for "only variables that start with VUE_APP_ will be loaded.".
-
Christian Casutt about 3 yearshad the same issue -> in my case it was due to the fact, that i placed the .env file in the /src folder and not in the project root folder!
-
R007 about 3 yearsSame, this was the only way I could get it work. Once I added the file, ran npm run serve in the root of my projects directory I was able to reference the env variables.
-
Steven Almeroth about 3 years"Note that because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with alternate quotes, such as '"production"', or by using JSON.stringify('production')." webpack.js.org/plugins/define-plugin/#usage
-
zozo almost 3 yearsVUE_APP_ -> this. wasted over 30 minutes of my time. ty.
-
Partik over 2 yearsAs other answers helpfully point out, make sure you place your .env files at the root of the project, as a sibling of package.json (not in the src folder, for example).
-
chmike over 2 yearsWhere should be put the .env file ? In the src directory ?
-
chmike over 2 yearsMust the .env file be created in the src directory or the root directory ?
-
chmike over 2 yearsWhat about another answer stating that the file name .env.production will be used with build ? Is that correct or will .env be used with build ?
-
Pedro Silva over 2 yearsIt should be on the root of the project, like the package.json
-
ali6p over 2 years@chmike the root directory
-
CodeConnoisseur over 2 yearsRestarting the server also helped. Is adding the
VUE_APP
piece documented anywhere? -
Ozal Zarbaliyev over 2 yearsI am using vite. There env variables must start with VITE_ and don't need to install dotenv. instead process use import.meta.env.VITE_env_variable. here is documentation vitejs.dev/guide/env-and-mode.html
-
sMyles over 2 yearsThis is great, one thing to keep in mind is that the "build" mode is different from the webpack
NODE_ENV
mode, so you can use this to setup modes likestaging
or even different "versions" or "deployments" of your application medium.com/rangle-io/… -
sMyles over 2 yearsNote on this all depends on your version of loader you're using. For example in v8 you need to use
prependData
instead ofdata
-
sMyles over 2 yearsAlso if you're having issues make sure if you're using
scss
that you usescss
instead ofsass
(or just add them both) @dari0h -
phil over 2 yearsThanks. Worked also for vue 4. Im having e.g. also .env.test for build my vue app for our test machine. Need to build it with
npm run build -- --mode test
, then it takes the correct file (I think .env + .env.test in combination). Furthermore: If you would like to use env-vars in your template, of course you need to put them into a data attribute likedata(){ return { ENV: process.env } }
and use them in template, e.g.This is my env: {{ ENV.VUE_APP_WHATEVERYOUWANT }}
. Or is there any other smooth way?