一、方法一
在公用文件common.js中设置baseUrl
export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api'
该方法的优点:在项目打包时,static下面的文件是不会被webpack处理的,所以可以通过改变static下config.js中的值,更改服务器地址。
在main.js中设置全局的axios配置
import axios from 'axios'
import {baseUrl} from '@/assets/js/common.js'
axios.defaults.baseURL= baseUrl
在api_message.js中声名调用接口的方法
import qs from 'qs'
export function messagelist (params = {}) {
return axios.post('/event/list.do', qs.stringify(params))
}
注意:此处引入qs的原因
axios默认是 json 格式提交,确认后台是否做了对应的支持;若是只能接受传统的表单序列化,就需要自己写一个转义的方法,或者用qs依赖。
组件中调用
import {messagelist} from '@/assets/js/api_message.js'
export default {
name: 'ShopList',
components: { Item },
data() {
return {
list: []
}
},
methods: {
getList() {
let listdata = {
limit: 8,
offset: 0,
statueType: this.statueType,
condition: this.condition
}
messagelist(listdata).then(response => {
if (response.data.length > 0) {
this.list = response.data
}
}).catch(error => {
console.debug(error)
})
}
}
}
二、方法二:
开发环境:
生产环境:
在单个js中声名接口
import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
baseURL: baseUrl
})
export function login (params = {}) {
return instance.post('/duty/login', qs.stringify(params))
}
注意:在有的编辑器中,会报baseUrl未声名,但是不影响使用
三、方法三
开发环境
生产环境
在文件中使用
import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
baseURL: process.env.API
})