//main.js
import { createApp } from 'vue'
import App from './App.vue'

const app=createApp(App)
app.config.globalProperties.$test="这是公共数据" 

app.mount('#app')

组件

<template>
	<div>
	</div>
</template>

<script setup>
	import {
		reactive,
		onBeforeMount,
		getCurrentInstance,
	} from "vue"



	const {
		proxy
	} = getCurrentInstance(); //此处解构必须用proxy接收,正常使用:语法糖环境默认为setup钩子
	console.log(proxy.$test, 111)

	onBeforeMount(() => {
		console.log(getCurrentInstance().proxy.$test, 222) //正常使用:标准钩子
	})

</script>

<style scoped>

</style>

控制台打印：

说明成功接收到了公共数据

Vue3 网络代理配置axios

main.js中

1、引入axios

2、配置axios的基础路径（主要为了设置API

3、再配置公共数据引入axios

import { createApp } from 'vue'
import App from './App.vue'

import axios from "axios"

axios.defaults.baseURL="http://127.0.0.1:5173/api1" //设置axios的基本路径+自己设定的api

const app=createApp(App)
app.config.globalProperties.$axios=axios //将axios设置为公共数据，这样在使用时就不必在每个组件文件中引用


app.mount('#app')

config.js中进行代理配置proxy

如果是invite环境下则为

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  
  server: {
  		
  		proxy: {
  			'/api1': {
  				target: 'http://127.0.0.1:7001', // 代理的目标地址，我这里是用的egg的地址
  				rewrite: (path) => path.replace(/^\/api1/, '/'), // 路径重写
  				changeOrigin: true,
  				// secure: true, // target是否https接口
  				// ws: true, // target是否代理websockets               
  			}
  		}
  	},
	
})

如果是webpack环境则可以参考我再vue2中的axios配置，基本相同http://t.csdn.cn/yLlUH

组件的代码app.vue

<template>
	<div>
       <div v-for="el in arr1">
		   <h1>菜名：{
    
    {el.title}}--价格：{
    
    {el.price}}元--数量：{
    
    {el.count}}</h1>
	   </div>

	</div>
</template>

<script setup>
	import {ref,
		reactive,
		onBeforeMount,
		getCurrentInstance,

	} from "vue"

	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装

	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/test') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 console.log(arr1)		 
  	 })
  


</script>

<style scoped>

</style>

已知后端的数据为

界面效果和控台打印：

说明成功请求到了后端的数据，并展现到了界面上

Vue3中的公共数据配置globalProperties getCurrentInstance、网络代理配置

公共数据配置

globalProperties

getCurrentInstance

案例：

Vue3 网络代理配置axios

main.js中

config.js中进行代理配置proxy

组件的代码app.vue

猜你喜欢