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?

Heatstroke

Well you did everything right! I just tried in my PC. You just have to restart your development server! – Baum

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. – Virnelli

Answer 1

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

ctrl + c

then

npm run serve

Piccoloist

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. – Electroencephalograph

Answer 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.

Windowlight

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. – Scarcely

Answer 3

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.

Newburg

Answer 4

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.

Ferrand

Answer 5

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.

Witness