vue environment variable configuration—(details)

In usevueWhen it comes to frameworks, two environments are often used, one is the development environment, that is, the environment during local development, and the other is the production environment, that is, the environment to be published online.

Normally, development uses a production environment. If it is published online, the environment needs to be switched to online. It is also OK to switch artificially, but it will be easy to forget. You can automatically switch the environment by configuring different running commands.

Let's start:

Implementation principle of configuration environment

The implementation principle is to adoptin top-level object(Process environment, return an object containing user environment information) attribute, distinguish and switch environments according to the configuration files of each environment

Specific examples

1. Installation dependencies

npm install process

2. Create.and.Two files

Note that the file should be created under the root directory

.The file contents are as follows:

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/* Request interface address */
VUE_APP_INTERFACE_URL="https://xxx"
/* proxy proxy address */
VUE_APP_PROXYURL='http://xxx'

.The file contents are as follows:

NODE_ENV='production'
VUE_APP_TITLE='prod'
/* Request interface address */
VUE_APP_INTERFACE="https://xxx"

If necessary, add one.The test environment file, the content is as follows:

NODE_ENV='production'
VUE_APP_TITLE='test'
/* Request interface address */
VUE_APP_INTERFACE="https://xxx"

3. Set the default environment when project starts

Just modify the required environment after the project start command, for examplenpm run dev,Bundle--mode devChange to--mode prodIt becomes a development environment

Some of the contents are as follows:

"scripts":{
	"dev":"vue-cli-service serve --mode dev",// Run locally with the interface address in .
	"prod":"vue-cli-service serve --mode prod",// Run locally with the interface address in .
	"build": "vue-cli-service build",//Put the official package with the interface address in .
    "build:test": "vue-cli-service build --mode test"//Put the test package with the interface address in .
}

4. Check whether the environment is configured successfully

existPrint the current environment in the file and the output is successful
(.NODE_ENV)