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