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)=>{
          ......
        });
      },
  },
});
目录
相关文章
|
12月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
451 1
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
1447 4
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
3052 4
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
441 3
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
2729 4
|
12月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
868 2
|
11月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
736 137
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1595 0
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能