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.js 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.js 3.0 beta.
Solution :
If you use vue.js cli with the Webpack template (default config), you can create and add the environment variables to a .env file.
The variables will automatically be accessible under process.env.variableName in the 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
the .env file should look like this:
VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value
It is my understanding that all you need to do is create the .env file and add the variables then you’re ready to go! :)
As noted in comment below:
If you are using vue.js cli 3, only variables that start with VUE_APP_ will be loaded.
Solution 2:
If you are using vue.js 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
With this, you will be able to use process.env.VUE_APP_ENV_VARIABLE in the project (.js and .vue.js files).
Update
According to @ali6p, with vue.js Cli 3, isn’t necessary to install dotenv dependency.
Solution 3:
In the root of the project create the 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 the env files you simply declare the config as key-value pairs, but if you’re using vue.js 3, you must prefix with VUE_APP_:
In the .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 the 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 the mode then you will get the title from there.
You can create configs that are ‘hidden’ from git by appending .local to the file: .env.someEnvironment1.local - very useful for when you have secrets.
Read the docs for more info.
Solution 4:
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’”
}
})
]);
}
Solution 5:
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 the components (vue.js 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 6:
In vue-cli version 3:
There are there options for .env files:
Either you can use .env or:
.env.test
.env.development
.env.production
You can use custom .env variables by using the prefix regex as /^/ instead of /^VUE_APP_/ in /node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE
This is certainly not recommended for the sake of developing an open source app in different modes like test, development, and production of .env files. Because everytime you npm install .. , it will be overrided.
Solution 7:
For those using vue.js CLI 3 and the webpack-simple install, Aaron’s answer did work for me however I wasn’t keen on adding my environment variables to my webpack.config.js as I wanted to commit it to GitHub. Instead I installed the dotenv-webpack plugin and this appears to load environment variables fine from a .env file at the root of the project without the need to prepend VUE_APP_ to the environment variables.