1、在根目錄新建四個(gè)文件
項(xiàng)目跟路徑.png
1.1（.env文件）
初始化設(shè)置全局對(duì)象process.env屬性
vue-cli中規(guī)定梁只，只有以 VUE_APP_ 開頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中
VUE_APP_URL：接口請(qǐng)求的域名
NODE_ENV = development
BASE_URL = '/'
VUE_APP_URL = 'https://***.******.***'
1.2（.env.dev文件）
開發(fā)環(huán)境下的配置文件
NODE_ENV = development
BASE_URL = '/'
VUE_APP_URL = 'https://www.development.com'
1.3（.env.prod文件）
生產(chǎn)環(huán)境下的配置文件
NODE_ENV = production
BASE_URL = '/'
VUE_APP_URL = 'https://www.production.com'
1.4（.env.test文件）
測(cè)試環(huán)境下的配置文件
NODE_ENV = test
BASE_URL = '/'
VUE_APP_URL = 'https://www.test.com'
2缚柳、在package.json中配置scripts 關(guān)聯(lián)打包部署對(duì)應(yīng)的.env文件
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
對(duì)應(yīng)打包運(yùn)行的命令：
npm run build //開發(fā)環(huán)境
npm run build:test //測(cè)試環(huán)境
npm run build:prod //生產(chǎn)環(huán)境
3、在axios中應(yīng)用
創(chuàng)建axios實(shí)例搪锣，通過axios.create()創(chuàng)建實(shí)例秋忙，配置實(shí)例中baseURL屬性的值為 process.env.VUE_APP_URL即可在各環(huán)境下請(qǐng)求對(duì)應(yīng)的接口域名
const instance = axios.create({
baseURL: process.env.VUE_APP_URL,
timeout: 5000,
transformRequest: data => {
return qs.stringify(data, { allowDots: true })
}
})
