How to configure environment variables with vue-cli 3?

vue.js environment-variables vue-cli-3
Isaías Orozco Toledo picture Isaías Orozco Toledo · Nov 6, 2018 · Viewed 11.9k times · Source

i try to use environment variables in vue-cli, but is not working, everytime says 'undefined' when use console.log(process.env.VUE_APP_BASE_URI). But process.env.NODE_ENV says 'development' as i defined in webpack.config.js.

I read the documentation of vue-cli 3 and put my .env.* files in the root project. like this: enter image description here

Webpack.config.js

    module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: ['babel-polyfill', './App/index.js']
  },
  plugins:[
    new VueLoaderPlugin()
  ],

.env.development

VUE_APP_BASE_URI=http://localhost:64208/api/

.env.production

VUE_APP_BASE_URI=http://localhost:64208/api/

I use .NET Core with Vue. How to use the environment?

Answer

Bagaskara picture Bagaskara · Apr 25, 2019

it just happened to me, the solution is very simple. Just restart your development server.

ctrl + c

then

npm run serve

Related questions

Using Environment Variables with Vue.js

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 …

Read More
Vue-cli 3 Environment Variables all undefined

I've tried all of the solutions out there but none seem to work for me. I just want to store some values in a .env file within my Vue app but simply trying to log process.env returns an empty …

Read More
Add Laravel .env variable to Vue component

I would like to get access to an .env variable using Vue JS. In my .env file I have added the 'MIX_' prefix to the var. MIX_VAR=key And then in the vue component, I have in the …

Read More