vue-cli3 中的环境变量

官方文档是这样写的:

src同名文件夹下的建立

.env.[model] 配置文件  // mode:production development ...

 

载入的变量会对vue-cli-service的所有命令、插件和依赖可用

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

 

想一下里面实现的原理，应该是这样的:

 

1.设定好的key value值首先会被webpack构建进程 安置，在webpack构建时直接就可以拿到process.env.拿到,

 

2.文档又说，如果是以VUE_APP_开头的变量会被webpack.definePlugin放到客户端中，在代码中使用process.env.xx就可以拿到

即在编译过程中进行define字符串替换

内部实现应该是将process.env.VUE_APP_xxx 替换为 相应的值