.env

Vue-cli使用了dotenv配置.env文件，所以规则官方参考motdotla/dotenv，并支持motdotla/dotenv-expand

规则

• NAME=VALUE

BASIC = basic
BASIC = 'basic'
BASIC = "basic"
# 三种写法拥有同样结果 => process.env.BASIC = "basic"
# 第一种VALUE会执行trim()函数
# 单括号与双括号会相互转换（无实际意义）
# 空值会为空字符串 BASIC = => process.env.BASIC = ''

• NAME=OBJECT

JSON={"foo": "bar"}
# 结果为JSON => process.env.JSON = "{\"foo\": \"bar\"}"

拓展的 dotenv-expand

dotenv-expand支持变量功能

# $ 与 ${}
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

vscode插件

• DotENV 语法高亮
• shell-format 格式化

VUE_APP_前缀作用

按照dotenv，在.env文件写的变量都会挂载至process.env，在配置文件vue.config.js配置时确实能打印出来（且包括许多node原有字段），但在浏览器中不行。在.vue文件中console打印，只能打印BASE_URL、NODE_ENV、VUE_APP_为前缀的变量。

所以，可以利用这个特性，来配置文件代理的地址