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

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

在这里插入图片描述

方式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’,
})

方式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"'
}

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

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

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

axios.defaults.baseURL = process.env.API_ROOT

第三步:重启项目,这样在开发环境执行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/

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐