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

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


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)=>{
          ......
        });
      },
  },
});
目录
相关文章
|
9天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
22 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
在 Vue3 中,如何使用 setup 函数创建响应式数据?
在 Vue3 中,如何使用 setup 函数创建响应式数据?
|
24天前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
29 1
|
2月前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
|
8天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
8天前
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
|
22天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
23 0
|
2月前
|
JavaScript 前端开发
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
|
2月前
|
JavaScript API
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
这篇博客文章讲解了Vue中列表排序的方法,使用`filter`、`sort`和`indexOf`等数组方法进行数据的过滤和排序,并探讨了Vue检测数据变化的原理,包括Vue如何通过setter和数组方法来实现数据的响应式更新。
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
|
2月前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
28 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
下一篇
无影云桌面