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)=>{......});},},});

Vue3 配置代理和使用全局axios请求数据相关推荐

Cli4.5.x 中使用axios请求数据
Cli4.5.x 中使用axios请求数据文章目录 Cli4.5.x 中使用axios请求数据前言一.安装并配置axios 1.安装axios 2.vue-axios 二.各种请求方法三.请求 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
vue中使用axios请求数据过程
使用axios请求数据过程 1. 导入axios包 import axios from 'axios' 2. 在钩子函数中调用函数 mounted() {this.getinitialdata() / ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
Vue3+Vite+TS后台项目 ~ 4. axios请求封装
一.axios封装 1. request 请求封装新建 src / utils / request.ts 文件: import axios from 'axios'const request = a ...
16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】
一.页面二.react-router4.x 路由配置 App.js import React from "react";import { BrowserRouter as Rou ...
偏前端 - vue-cli(axios请求数据==》token+按接口参数顺序（参数值拼接base64）- MD5)...
token+按接口参数顺序(参数值拼接base64)-> MD5) 请教于"喵咪",再此特别鸣谢!~ 特别强调:import qs from qs; 这个内部方法一定要用哦. ...
umi搭建react+antd项目（四）axios请求数据
1.下载axios yarn add axios 2.在src下新建文件夹conf,再新增js文件:axiosConf.js import axios from 'axios'axios.defaul ...
jQuery ? NO, Axios——请求数据
axios也是一个JS库,我们今天要说的是使用axios来进行我们的Ajax请求那么问题来了,我们为什么要放着jQuery不用,用axios呢? 因为这个JS库是专门用于网络数据请求的库,它有着俩个 ...

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

更详细请参考：

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

Vue3 配置代理和使用全局axios请求数据相关推荐

最新文章

热门文章