vue-cli axios统一请求前缀设置

Posted mp-ui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli axios统一请求前缀设置相关的知识,希望对你有一定的参考价值。

在vue组件里面用axios发送ajax请求的时候,第一个参数就是要发送的url地址

this.$axios.post('http://localhost:8080/account/login', username: username, password: password).then(res => 
    // 回调函数
)

其实这样子是没有什么问题,但是这个url也是我们在测试环境下用的,在生产环境下就需要修改url的地址,但是当代码多了的时候再一个一个改也会很麻烦,所以需要设置一个统一的前缀

修改,main.js,加入axios.defaults.baseURL = 'http://localhost:8080'即可

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://localhost:8080'

new Vue(
  router,
  store,
  render: h => h(App)
).$mount('#app')

还可以用if判断当前是不是在测试环境

if (process.env.NODE_ENV === 'development') 
    axios.defaults.baseURL = 'http://localhost:8080'
else
	axios.defaults.baseURL = '服务器地址'

NODE_ENV变量的值可以在package.json的script里改变,不填默认就是development

//package.json
"scripts": 
    "serve": "set NODE_ENV=development&&vue-cli-service serve --port 8081",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  

设置完之后,发送ajax请求就不用加上服务器前缀了

this.$axios.post('/account/login', username: username, password: password).then(res => 
    // 回调函数
)

以上是关于vue-cli axios统一请求前缀设置的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli axios统一请求前缀设置

Vue-cli webpack 设置Axios发起请求统一前缀的路径(设置统一请求地址)(发起GET请求,发起POST请求,发起PUT请求,发起DELETE请求)

Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

vue-cli配置axios,并基于axios进行后台请求函数封装

axios请求VUE-CLI3项目本地json文件404

Vue-cli3.0项目下axios请求本地json文件的数据