How to configure environment variables with vue-cli 3?

Question

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:

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?

Well you did everything right! I just tried in my PC. You just have to restart your development server! — Roland
– Roland, Commented Nov 6, 2018 at 19:57
Vue cli 3 doesn't use webpack.config.js it uses vue.config.js - important distinction. You would set --mode development and --mode production in your scripts in package.json so the correct environment is loaded. — Ohgodwhy
– Ohgodwhy, Commented Nov 6, 2018 at 21:01

Bagaskara · Accepted Answer · 2019-04-25 07:16:30Z

6

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

ctrl + c

then

npm run serve

answered Apr 25, 2019 at 7:16

Bagaskara

9018 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravi Anand Over a year ago

you could also check your webpack.config.js by running vue inspect in your terminal or vue inspect > webpack.config.js to add file in project directory.

Chuan · Accepted Answer · 2019-03-01 21:21:01Z

2

There might be different ways to achieve this, one easy way from command line would be:

npx vue-cli-service serve --mode production

Default to development if mode was not specified.

edited Mar 1, 2019 at 21:21

answered Feb 27, 2019 at 10:00

Chuan

3,5311 gold badge23 silver badges26 bronze badges

1 Comment

Wiggy A. Over a year ago

For whatever reason, inside a docker container I wasn't able to get the .env files to work via npm run serve --mode=production (I'm assuming it was a versioning issue somewhere), but this ended up getting the .env files to work.

Vaibhav Vishal · Accepted Answer · 2019-07-25 08:52:47Z

1

You need to rename the file to .env only instead of .env.production or .env.development. it should work, if not, comment on the same thread.

edited Jul 25, 2019 at 8:52

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

answered Jul 25, 2019 at 8:32

Ajay Kumar

976 bronze badges

Comments

andreasnico · Accepted Answer · 2019-03-08 09:53:33Z

0

I do not know if this is the same problem that you had, but this happend in my case:

I set up everything correct as you did (Not any .config.js file)
I then stopped and startet the dev-server with npm run serve
When I now refreshed the page, nothing changed in the console

Then I saw that the npm run serve command had started the site on a different port!. The old version was still running, but gave the old values. When I tried the new port the values where correct.

answered Mar 8, 2019 at 9:53

andreasnico

1,45614 silver badges25 bronze badges

Comments

adhg · Accepted Answer · 2020-05-03 21:00:41Z

0

In my case (Vue CLI 3 with Core 2.2) I have to put the .env files under the Core webapp folder. It did not work if I have them in wwwroot or the Vue app folder.

edited May 3, 2020 at 21:00

adhg

11k13 gold badges63 silver badges99 bronze badges

answered Oct 30, 2019 at 20:53

Viet

531 gold badge1 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to configure environment variables with vue-cli 3?

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related