1.安装axios.
npm install axios
2.在config目录下的index.js设置proxyTable:
proxyTable: {
'/api':{
target: "http://localhost:9000",
changeOrigin: true,
pathRewrite:{
'^/api': ''
}
}
}
3.在main.js引入axios模块:
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
Vue.config.productionTip = false
4.在App.vue添加测试方法:
methods: {
created: function () {
this.testAxios1()
},
methods: {
testAxios1: function () {
console.log(this.$axios.defaults.baseURL)
this.$axios({
method: 'get',
url: '/data.json'
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
}
6.本例中使用Tomcat8.5开启一个本地web服务器,然后在webapps添加data.json文件,文件内容为:
{
"data":[
]
}
7.重新运行:npm run dev.
得到以下结果:
浏览器中看到的http://localhost:8083/api/data.json,并非实际访问地址,这是因为设置代理,具体路径index.js中的proxyTable中的target+this.$aixos访问的url。