使用
vue-cli開發(fā)項(xiàng)目過程中, 根據(jù)開發(fā)環(huán)境和正式環(huán)境不同, 我們往往需要請(qǐng)求不同域名下的后臺(tái)接口, 這時(shí)候, 該怎么去設(shè)置, 達(dá)到同一種寫法可以根據(jù)環(huán)境不同而自動(dòng)切換請(qǐng)求域名呢? 本文將會(huì)介紹兩種配置方式.
本文中所有請(qǐng)求都是使用 axios
一
- 修改
config/dev.env.js(開發(fā)環(huán)境的配置)
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"http://localhost:3000"' // 開發(fā)環(huán)境接口地址(這里是增加的內(nèi)容)
})
- 修改
config/prod.env.js(正式環(huán)境的配置)
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://localhost:8888"' // 正式環(huán)境接口地址(這里是增加的內(nèi)容)
}
- 使用
axios發(fā)送請(qǐng)求
axios.get(process.env.API_HOST + '/api/userData') // 請(qǐng)求前加上 `process.env.API_HOST`
.then(data => {
console.log(data)
})
二
第二種方法主要使用
axios的創(chuàng)建實(shí)例的用法
在
main.js配置axios
import axios from 'axios'
const host = process.env.NODE_ENV === 'development' ? 'dev api host' : 'prod api host' // 根據(jù) process.env.NODE_ENV 的值判斷當(dāng)前是什么環(huán)境
const instance = axios.create({
baseURL: host
})
Vue.prototype.$http = instance
在組件中調(diào)用
this.$http.get('/api/userData')
.then(data => {
console.log(data)
})
