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, Nov 06 '18 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, Nov 06 '18 at 21:01

score 6 · Answer 1 · answered Apr 25 '19 at 07:16

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 '19 at 07:16

Bagaskara

812
8
15

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. – Ravi Anand Aug 09 '19 at 21:34

Chuan · Answer 2 · 2019-03-01T21:21:01.387

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 01 '19 at 21:21

answered Feb 27 '19 at 10:00

Chuan

3,103
1
19
23

1

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. – Wiggy A. Apr 25 '20 at 07:10

score 1 · Answer 3 · edited Jul 25 '19 at 08:52

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 '19 at 08:52

Vaibhav Vishal

6,576
7
27
48

answered Jul 25 '19 at 08:32

Ajay Kumar

99
6

score 0 · Answer 4 · answered Mar 08 '19 at 09:53

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.

score 0 · Answer 5 · edited May 03 '20 at 21:00

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 03 '20 at 21:00

adhg

10,437
12
58
94

answered Oct 30 '19 at 20:53

Viet

33
1
3

How to configure environment variables with vue-cli 3?

5 Answers5