Vue3 配置代理和使用全局axios请求数据

更详细请参考：

https://blog.csdn.net/qq_28550263/article/details/120633610

vue3中配置全局代理和使用axios向服务器请求数据

main.ts

import { createApp } from 'vue'
import VueAxios from 'vue-axios'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import axios from 'axios'               // 引入axios
axios.defaults.baseURL = '/api'         

const app = createApp(App)  指向Vue
app.config.globalProperties.$rqst= axios 下挂载
app.use(VueAxios, axios)
app.use(store)
app.use(router)
app.mount('#app')

手动在vue3项目中创建vue.config.js，配置proxy：

// const webpack = require('webpack');
// const webpack = require('webpack');
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir:"statics",
  indexPath:"index.html",
  productionSourceMap: process.env.NODE_ENV !== 'production'? false : true,
  /* webpack-dev-server 相关配置 */
  devServer: { 
    /* 使用代理 */
    proxy: {
        '/api': {
            target: 'http://xxxx.xxxx.xxxx.xxxx:xxxx/',  // 目标代理服务器地址
            changeOrigin: true,                          // 允许跨域
            pathRewrite:{
              "^/api":''
            }
        },
    },
 },
}

某组件中使用请求

import { defineComponent, getCurrentInstance} from 'vue';
export default defineComponent({
  name:'name',
  props:{
    datas:{
        type: Object,
        default: function(){
            return {......};
        }
    }
  },

  //  setup 在整个组件生命周期前执行一次且仅一次，可以在这时获取全局参数的代理对象
  setup(props) {
    let datas = (props as any).datas;                  // 组件参数对象
    const { proxy } = (getCurrentInstance() as any);   // 全局变量代理对象

    return{
        proxy
    }
  },
  
  methods: {
      // 可以在 methods 中定义请求的函数以备调用
      getCodeList(user:string){
        this.proxy.$rqst.post('/mycode/getCodeList',{"user":user})
        .then((response: any)=>{
          ......
        });
      },
  },
  
});