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 替換爲 相應的值