轉載此作者 https://zhuanlan.zhihu.com/p/51746015
.env文件為全局環境變量，可以在啟動的項目中任何位置使用，主要用於線上環境和開發環境的配置文件替換。
.env.development 模式用於serve，開發環境，就是開始環境的時候會引用這個文件里面的配置
.env.production模式用於build，線上環境。
拿現在用上的項目來講解一下：
在項目的根目錄下創建這兩個文件，里面設置對應的變量
開發環境：
//.env.development
VUE_APP_BASE_API = '/api/'
線上環境：
//.env.production
VUE_APP_BASE_API = ''
在vue.config.js文件里面配置個接口請求代理，請參考vue-cli3的全局配置中的devServer.proxy
devServer: { host: '0.0.0.0', port: 8888, https: false, proxy: { '/api': { target: 'http://baidu.com', changeOrigin: true, secure: false, pathRewrite: { '^/api': '' } } } },
配置上面代理，會把/api替換為http://baidu.com的請求地址，當然，你可以每個請求的接口都加上/pai。但這需要更換線上地址的時候也會去請求代理的http://baidu.com地址
export function getLogin(params) { return request({ url: '/api/login/login', //每個接口地址都加上/pai
method: 'get', params, }); }
如果你的理想狀態是開發環境的時候使用代理，線上環境的時候不需要代理，顯然使用環境變量會非常方便，而不需要每個接口都加上/api。你只需要在axios配置文件下更改一下
const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api的_url
timeout: 50000, // request timeout
});
