Vue中的axios请求设置base_url几种方式_axios.defaults.baseurl

方式1. 通过全局的vue组件实现（在main.js中定义全局变量）

 Vue.prototype.$base_url = 'http://172.17.10.109:7600';
  let url=this.$base_url + '/version/list';
1
2

方式2.在入口文件main.js中实现

1.import axios from ‘axios’
axios.defaults.baseURL=‘http://www.liulongbin.top:3005/’;
Vue.prototype.$http = axios
2. created(){
axios({
url:‘api/getlunbo’,
method: ‘get’,
})
1
2
3
4
5
6
7
8

方式3.vue中使用axios给生产环境和开发环境配置不同的baseUrl

第一步：设置不同的接口地址
找到文件：/config/dev.env.js代码修改为：

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',　　//添加
  API_ROOT: '"//192.168.1.8/api"'
}
1
2
3
4
5
6
7

/config/prod.env.js代码修改为：

module.exports = {
  NODE_ENV: '"production"',
    //添加
  API_ROOT: '"//www.baidu.com/api"'
}
1
2
3
4
5

第二步：调用axios的文件下修改baseUrl

axios.defaults.baseURL = process.env.API_ROOT
1

第三步：重启项目，这样在开发环境执行npm run dev 的时候，就调用的是192.168.1.8/api而在执行npm run build打包的时候则调用的是www.baidu.com/api
官网：bbsmax

4.参考

vue跨域处理（vue项目中baseUrl设置问题）
https://www.wandouip.com/t5i259396/