更详细请参考:
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.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
:
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir:"statics",
indexPath:"index.html",
productionSourceMap: process.env.NODE_ENV !== 'production'? false : true,
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(props) {
let datas = (props as any).datas;
const { proxy } = (getCurrentInstance() as any);
return{
proxy
}
},
methods: {
getCodeList(user:string){
this.proxy.$rqst.post('/mycode/getCodeList',{"user":user})
.then((response: any)=>{
......
});
},
},
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)