Implementation method of vue project environment variable configuration

question

In actual development, some variables in the development environment and production environment are different, such as interface addresses, etc., and they need to be manually switched before packaging.

Compile time

New

let baseUrl = '';
if(.NODE_ENV == 'production'){
  baseUrl = 'https://xxxxxxxxx';
} else if (.NODE_ENV == 'development') {
 baseUrl = '/api'
}

export {
  baseUrl
}

.NODE_ENV is built-in via webpackDefinePlugin Variables defined for all dependencies

new ({
   '.NODE_ENV': 'development'
  }),

new ({
   '.NODE_ENV': 'production'
  }),

In this way, the .NODE_ENV variable can be called in any file of the project. I have tested that process is not mounted on the window variable. It is guessed that it may be mounted on the node's process variable.

When running scripts to compile projects, different baseUrls will be set according to the variable values.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.