Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure environment variables with vue-cli 3?

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?

like image 877
Isaías Orozco Toledo Avatar asked Nov 06 '18 19:11

Isaías Orozco Toledo


People also ask

Does vue CLI support vue 3?

Vue CLI is now in maintenance mode. For new projects, please use create-vue to scaffold Vite-based projects. create-vue supports both Vue 2 and Vue 3.

What is environment variable in Vue CLI?

Environment Variables Vue CLI keeps track of the mode you have instructed it to build your project in. As a part of the build process, it will look for a file in the project root called.env. [BUILD-MODE-NAME] and load in only the file that matches.

What are the modes supported by Vue CLI?

By default, Vue CLI will support three modes: “development”, “test’, and "production”. For more information on using environment variables with Vue CLI 3, consult the official documentation.

How do I keep things private in Vue CLI 3?

Things like usernames, password, links to an api, and more should not be stored directly. Storing them in environment variables is one of the easiest ways keep them private and have our code still access these important strings. The way Vue CLI 3 accesses environment variables is different from version 2.

What is Vue command line interface (CLI)?

The Vue team created the Vue Command Line Interface (CLI) to help us quickly set up new projects in a complete development environment, including a local server. When we run a local webpage from our system, the browser uses the file:// protocol to render that page. But Vue uses some modern Javascript features that only work on the http:// protocol.


1 Answers

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

ctrl + c

then

npm run serve
like image 132
Bagaskara Avatar answered Oct 06 '22 03:10

Bagaskara