Vue脚手架中的axios的引入，网络事件代理配置

axios的引入

首先去终端安装axios，指令：npm i axios，

第一种：在需要进行axios请求的Vue文件内的script标签内引入axios即 import axios from "axios”，就可以使用了

第二种：在main.js文件中引入 import axios from "axios”,再将axios写入原型中Vue.prototype，这样每个Vue文件内都可以直接使用，不在需要每次都引入一次 import axios from "axios”

这样的话，在进行axios请求时使用this.$axios而不是axios

网络代理配置

由于Vue脚手架中运行时会有自己的服务器端口默认8080，

当我们自己开启后端服务器（node.js默认端口7001），想要在Vue环境中使用Ajax请求后端数据时就会产生跨域，那么我们就要在vue.config.js中进行网络代理配置

如：在没有进行网络事件代理时，使用axios请求后端数据，如

 

 那么我们在界面中点击按钮，就会跨域

 

配置vue.config.js文件

 所以我们在vue.config.js文件中进行网络代理配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//取消严格模式
  devServer: {
		port: 8080, //默认vue脚手架配置就8080
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		proxy: {
			//配置api，可以配置多个Api
			'/api111': {
				target: 'http://localhost:7001',//跳转的目标网址
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/api111': '/'
				}, 
				//请求时重写pathname: 
				//项目组件中请求的是http://localhost/hqyj/api111
				//8080服务器就会帮我们代理请求 http://localhost:7001/api111
				//所以将api重写为'^/api111': '/'
			},
		},
	}
})

此时再将api写入axios工具请求的网址中：

 此时我们再点击按钮就能成功得到后端数据

 

 此时我们也会存在一个问题，就是每次进行axios请求的时候我们都要在前边写api才能进行网络事件代理，所以我们可以在main.js文件中配置公共url axios.defaults.baseURL

main.js文件中配置axios公共url 

import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
 
axios.defaults.baseURL="http://localhost:8080/api111"
//配置公共url  如果这个axios去请求 "test"  它实际的网址是http://localhost:8080/api111/test
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

此时再将axios工具请求的网址中的api删掉:

 此时依然可以成功请求到后端数据，但此方法只适合有且仅有一个api的时候使用