在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 => {
// 回调函数
})