Vue-cli uses the dotenv configuration. Env file, so the rule officially refers to motdotla/dotenv and supports motdotla/ dotenV-expand

The rules

  • NAME=VALUE
BASIC = basic
BASIC = 'basic'
BASIC = "basic"
BASIC => process.env.BASIC = "BASIC"
# The first type of VALUE executes trim()
# single parentheses and double parentheses convert to each other
BASIC = => process.env.BASIC ="
Copy the code
  • NAME=OBJECT
JSON={"foo": "bar"}
# results as JSON = > process. The env. JSON = "{\" foo \ ": \" bar \ "}"
Copy the code

Development ofdotenv-expand

Dotenv-expand Supports variable function

# $and ${}
NODE_ENV=test
BASIC=basic
BASIC_EXPAND=$BASIC
MACHINE=machine_env
MACHINE_EXPAND=$MACHINE
UNDEFINED_EXPAND=$UNDEFINED_ENV_KEY
ESCAPED_EXPAND=\$ESCAPED
MONGOLAB_DATABASE=heroku_db
MONGOLAB_USER=username
MONGOLAB_PASSWORD=password
MONGOLAB_DOMAIN=abcd1234.mongolab.com
MONGOLAB_PORT=12345
MONGOLAB_URI=mongodb://${MONGOLAB_USER}:${MONGOLAB_PASSWORD}@${MONGOLAB_DOMAIN}:${MONGOLAB_PORT}/${MONGOLAB_DATABASE}

MONGOLAB_USER_RECURSIVELY=${MONGOLAB_USER}:${MONGOLAB_PASSWORD}
MONGOLAB_URI_RECURSIVELY=mongodb://${MONGOLAB_USER_RECURSIVELY}@${MONGOLAB_DOMAIN}:${MONGOLAB_PORT}/${MONGOLAB_DATABASE}

WITHOUT_CURLY_BRACES_URI=mongodb://$MONGOLAB_USER:$MONGOLAB_PASSWORD@$MONGOLAB_DOMAIN:$MONGOLAB_PORT/$MONGOLAB_DATABASE
WITHOUT_CURLY_BRACES_USER_RECURSIVELY=$MONGOLAB_USER:$MONGOLAB_PASSWORD
WITHOUT_CURLY_BRACES_URI_RECURSIVELY=mongodb://$MONGOLAB_USER_RECURSIVELY@$MONGOLAB_DOMAIN:$MONGOLAB_PORT/$MONGOLAB_DATABASE
Copy the code

Vscode plug-in

  • DotENV syntax highlighting
  • Shell – format format

VUE_APP_ Function of prefix

According to Dotenv, variables written in the. Env file are mounted to process.env, which does print when configured in the vue. In the. Vue file, you can only print variables prefixed with BASE_URL, NODE_ENV, and VUE_APP_.

Therefore, you can use this feature to configure the address of the file agent