一個vue-cli項目有三個模式：
development(開發環境)模式，用於vue-cli-service serve。
production(生產環境)模式，用於vue-cli-service build 和 vue-cli-service test:e2e。
test(測試環境)模式，用於vue-cli-service test:unit。
在根項目》package.json下修改
{
...
"scripts":{
...
"test":"vue-cli-service test:unit"
}
...
}
一個模式可以包含多個環境變量。
也就是說，每個模式都會將NODE_ENV的值設置為模式的名稱。比如在development模式下NODE_ENV的值會被設置為“development”。在production模式下NODE_ENV的值會被設置為“production”。
我們可以通過為.env文件增加后綴，來設置某個模式下特有的環境變量。
比如，在項目根目錄下創建一個名為.env.development文件，那么在這個文件里面聲明過的變量，就只會在development模式下被載入。
比如，在項目根目錄下創建一個名為.env.production文件，那么在這個文件里面聲明過的變量，就只會在production模式下被載入。
如果這個環境變量想同時在所有模式下被載入，可以聲明在.env文件里。
注意一下環境變量聲明的命名規范，只有以VUE_APP_開頭的變量，會被webpack.DefinePlugin靜態嵌入到客戶端的包中。
（如果配置時項目正在運行，配置完成后需要結束項目，再次運行項目，才能生效。）
在根目錄下》.env中添加代碼
VUE_APP_DOMAIN=http://www.baidu.com
VUE_APP_TITLE=百度搜索
在根目錄下》.env.development中添加代碼
VUE_APP_DOMAIN=http://dev.baidu.com
在根目錄下》.env.production中添加代碼
VUE_APP_DOMAIN=http://production.baidu.com
在根目錄》src》App.vue中修改代碼： <script> ... export default{ ... created(){ console.log(process.env.VUE_APP_DOMAIN)
console.log(process.env.VUE_APP_TITLE)
} } </script>
輸入以下命令，在控制台輸出http://dev.baidu.com
npm run serve
輸入以下命令，在控制台輸出http://production.baidu.com
npm run build
serve -s dist
實際應用在接口地址。不同環境下使用不同的接口地址，顯示不同的數據。
只需要在這三個文件里面統一變量名，然后在不同文件里面改變變量的值就可以了。